H5中canvas标签制作在线画板

最新推荐文章于 2022-12-19 16:48:35 发布

weixin_34293911

最新推荐文章于 2022-12-19 16:48:35 发布

阅读量265

点赞数

文章标签： javascript ViewUI

1.介绍

　　左键点击下移动开始画图。放开鼠标不在画图。

2.重要使用理论

query的使用：

　　鼠标的按下mousedown

　　鼠标的移动mousemove

　　鼠标的放开 mouseup

3.程序

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8" />
 4     <title>draw board</title>
 5     <script src="D:\jquery\jquery-1.12.4.min.js"></script>
 6     <style type="text/css">
 7         #board{border:2px solid:#f00;}
 8     </style>
 9 </head>
10 <body>
11     <canvas id="board" width="300" height="300"></canvas>
12     <br/>
13     <script type="text/javascript">
14         var canvas=document.getElementById('board');
15         var board=canvas.getContext("2d");
16             board.lineWidth=5;
17             board.strokeStyle="blue";
18         var paint=false;
19         
20         //mousedown
21         $("#board").mousedown(function(e){
22             var mouseX=e.pageX-this.offsetLeft;
23             var mouseY=e.pageY-this.offsetTop;
24             paint=true;    //true
25             board.moveTo(mouseX,mouseY);        
26         });
27         
28         //mouseup
29         $("#board").mouseup(function(e){
30             paint=false;
31         });
32         
33         //mousemove
34         $("#board").mousemove(function(e){
35             var mouseX=e.pageX-this.offsetLeft;
36             var mouseY=e.pageY-this.offsetTop;
37             if(paint){
38                 board.lineTo(mouseX,mouseY);
39                 board.stroke();
40             }
41         });
42         
43         
44     </script>
45     <h2>哈哈哈哈</h2>
46 </body>
47 </html>