这篇文章主要介绍了html5如何实现画板画笔功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
实现画板画笔功能,效果如下:
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>
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 });
感谢你能够认真阅读完这篇文章,希望小编分享的“html5如何实现画板画笔功能”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!