<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas</title> <script src="jQuery.js"></script> </head> <style type="text/css"> body{ padding: 0; margin: 0; background: black; } #canvas{ background: white; margin: 100px 0 0 300px; } #canvas > span{ color: white; font-size: 14px; } </style> <body> <canvas id="canvas" width="600" height="500"> <span>您的浏览器不支持</span> </canvas> </body> </html> <script type="text/javascript"> /*获取绘制环境*/ var oc = $('#canvas')[0]; canvas = oc.getContext('2d'); $('#canvas').on('mousedown', function(){ /*开始绘制*/ canvas.beginPath(); /*设置动画绘制起点坐标*/ canvas.moveTo(event.pageX - 300 , event.pageY - 100); $('#canvas').on('mousemove', function(){ /*设置下一个点坐标*/ canvas.lineTo(event.pageX - 300 , event.pageY - 100); /*画线*/ canvas.stroke(); }); }).on('mouseup', function(){ $('#canvas').off('mousemove'); }); </script>