Canvas入门笔记-实现极简画笔
程序员文章站
2022-06-28 16:22:33
今天学习了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
在学习过后自己写了一个简单的扩展
实现画板画笔功能,效果如下:
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