本篇教程探讨了HTML5+CSS3从入门到精通 如何实现画板画笔功能,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
<
实现画板画笔功能,效果如下:
1
2
3
4
5
6
7
8
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 });
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!