html如何制作画笔,HTML5+CSS3从入门到精通 如何实现画板画笔功能

本篇教程探讨了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频道！