html5如何实现画板画笔功能

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

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

　　1 <div>

　　2     <!--画板-->

　　3     <canvas id="box1" height="400" width="400" style="background-color: antiquewhite"></canvas>

　　4     <!--保存并显示鼠标X轴位置-->

　　5     <label id="lab_X"></label>

　　6     <!--保存并显示鼠标Y轴位置-->

　　7     <label id="lab_Y"></label>

　　8 </div>

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