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>
