HTML代码：<!DOCTYPE html>
<html> <head> <title> 在线画图</title> <meta charset="utf-8" /> <style>
#d{margin-left:30%;}
</style> </head> <body> <div id="d">
<canvas id="canvas" width="500" height="500" style="border:1px solid red;"></canvas>
</div>
</body> </html>
JavaScript代码：
1 <script> 2 var canvas=document.getElementById("canvas"); 3 var ctx=canvas.getContext("2d"); 4 5 canvas.onmousedown=function(event){ 6 var x=event.clientX-canvas.offsetLeft; 7 var y=event.clientY-canvas.offsetTop; 8 ctx.beginPath(); 9 ctx.moveTo(x,y); 10 11 document.onmousemove=function(event){ 12 var x=event.clientX-canvas.offsetLeft; 13 var y=event.clientY-canvas.offsetTop; 14 ctx.lineTo(x,y); 15 ctx.strokeStyle="red"; 16 ctx.stroke(); 17 }; 18 }; 19 document.onmouseup=function(){ 20 ctx.closePath(); 21 document.onmousemove=null; 22 }; 23 </script>
运行后：
原文：http://www.cnblogs.com/--silence/p/4967624.html