您的位置：首页 > Web前端 > HTML5

H5中canvas标签制作在线画板

2017-06-26 00:28 489 查看

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>

4.运行结果图

　　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航