<!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>