html5如何实现画板画笔功能

这篇文章主要介绍了html5如何实现画板画笔功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联，为您提供网站建设公司、成都网站制作、网站营销推广、网站开发设计，对服务成都护栏打桩机等多个行业拥有丰富的网站建设及推广经验。创新互联网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏心悦目的作品。 与客户共同发展进步，是我们永远的责任！

实现画板画笔功能，效果如下：

1

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如何实现画板画笔功能”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!