高胜美,虎跃龙谭,孙爱荣吧
今天学习了Html5 Canvas入门，已经有大神写得很详细了http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#8
在学习过后自己写了一个简单的扩展
实现画板画笔功能，效果如下：
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
我要评论
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
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
HTML5 HTMLCollection和NodeList的区别详解
网友评论