1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 * 8 { 9 margin: 0; 10 padding: 0; 11 } 12 #box 13 { 14 width: 600px; 15 height: 600px; 16 margin: 0 auto; 17 } 18 #ca 19 { 20 21 background: #ccc; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="box"> 27 <canvas id="ca" width="600" height="600"> 28 29 </canvas> 30 </div> 31 32 <script > 33 var box=document.getElementById('box'); 34 var ca=document.getElementById('ca'); 35 var ctx=ca.getContext('2d'); 36 ca.onmousedown=function (ev) { 37 var event=window.event||ev; 38 var startx=event.clientX-box.offsetLeft; 39 var starty=event.clientY-box.offsetTop; 40 ctx.beginPath(); 41 ctx.moveTo(startx,starty); 42 ca.onmousemove=function (ev) { 43 var event=window.event||ev; 44 var endx=event.clientX-box.offsetLeft; 45 var endy=event.clientY-box.offsetTop; 46 ctx.lineTo(endx,endy); 47 ctx.strokeStyle='green'; 48 ctx.stroke(); 49 } 50 document.onmouseup=function () { 51 ca.onmousemove=null; 52 ctx.closePath(); 53 } 54 } 55 </script> 56 </body> 57 </html>
