欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Canvas入门笔记-实现极简画笔

程序员文章站 2022-03-12 20:54:15
今天学习了Html5 Canvas入门,已经有大神写得很详细了http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#8 在学习过后自己写了一个简单的扩展 实现画板画笔功能,效果如下: 1
2 3 < ......

今天学习了Html5 Canvas入门,已经有大神写得很详细了http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#8

在学习过后自己写了一个简单的扩展

实现画板画笔功能,效果如下:

Canvas入门笔记-实现极简画笔

Canvas入门笔记-实现极简画笔
1 <div>
2     <!--画板-->
3     <canvas id="box1" height="400" width="400" style="background-color: antiquewhite"></canvas>
4     <!--保存并显示鼠标X轴位置-->
5     <label id="lab_X"></label>
6     <!--保存并显示鼠标Y轴位置-->
7     <label id="lab_Y"></label>
8 </div>
View Code Canvas入门笔记-实现极简画笔
 1 $(function () {
 2             var canvas = document.getElementById("box1");
 3             if (canvas == null)
 4                 return false;
 5             var context = canvas.getContext("2d");
 6             //标记开始书写
 7             var start = false;
 8             $(canvas).mousemove(function (event) {
 9                 //显示当前鼠标位置
10                 $("#lab_X").text(event.pageX);
11                 $("#lab_Y").text(event.pageY);
12                 if (start) {
13                     context.lineTo(event.pageX, event.pageY);
14                     context.stroke();
15                 }
16             });
17             //鼠标按下,开始书写
18             $(canvas).mousedown(function () {
19                 context.beginPath();
20                 context.moveTo($("#lab_X").text(), $("#lab_Y").text());
21                 start = true;
22             });
23             //鼠标抬起,结束书写
24             $(canvas).mouseup(function () {
25 
26                 start = false;
27                 context.closePath();
28             });
29         });
View Code