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

相关推荐: SpringCloud中Ribbon怎么调用

这篇文章主要介绍“SpringCloud中Ribbon怎么调用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“SpringCloud中Ribbon怎么调用”文章能帮助大家解决问题。Spring Cloud Ribbon是…

免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。