canvas特效代码详解（2）

canvas是一个就基于像素的画图h5元素。

利用canvas做一个如下描述所示的动态图形：当鼠标点下去时开始绘图，在鼠标结束时完成一个矩形，当再一次点击时重复第一次的绘图步骤。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             canvas{
 8                 border: 1px solid #000;
 9             }
10         </style>
11     </head>
12     <body>
13         <canvas id="canvas" width="400" height="400"></canvas>
14         <script type="text/javascript">
15             var canvas = document.getElementById("canvas");
16             var context = canvas.getContext("2d");
17 //            当鼠标点击时执行的函数
18             canvas.οnmοusedοwn=()=>{
19 //                得到鼠标在canvas上的位置
20                 var x = event.clientX - canvas.offsetLeft;
21                 var y = event.clientY - canvas.offsetTop;
22                 var x1 = 0;
23                 var y1 = 0;
24 //                当鼠标移动时
25                 document.onmousemove = () =>{
26 //                    清除原来的矩形
27                     context.clearRect(0,0,canvas.width,canvas.height);
28 //                    得到鼠标绘制结束时矩形的位置
29                     x1 = event.clientX - canvas.offsetLeft;
30                     y1 = event.clientY - canvas.offsetTop;
31 //                    鼠标完成绘制时的矩形的宽和高
32                     context.strokeRect(x,y,(x1-x),(y1-y));
33                 }
34 //                鼠标离开后
35                 document.onmouseup = ()=>{
36                     document.onmousemove = null;
37                     document.ommousedown = null;
38                 }
39             }            
40         </script>
41     </body>
42 </html>