html5如何实现画板画笔功能

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

相关推荐: 如何使用CSS3+js实现简单的时钟特效

小编给大家分享一下如何使用CSS3+js实现简单的时钟特效，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！html代码如下：css 代码如下：　　2. 初始化默认时间，和表盘刻度 ：更…