html5实现一个简单的在线画板

来源:网络整理作者: 发布时间:2020-12-17 01:30

本文为大家分享了html5实现简单在线画板的代码，具有一定的参考价值，希望能够帮助到大家。...

实现代码如下：

（推荐教程：h5）

html5实现一个简单的在线画板

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> <script type="text/javascript"> var c = document.getElementById('canvas'); var ctx = c.getContext('2d'); //画一个黑色矩形 ctx.fillStyle = 'black'; ctx.fillRect(0,0,600,300); //按下标记 var onoff = false; var oldx = -10; var oldy = -10; //设置颜色 var linecolor = 'white'; //设置线宽 var linw = 4; //添加鼠标移动事件 canvas.addEventListener('mousemove',draw,true); //添加鼠标按下事件 canvas.addEventListener('mousedown',down,false); //添加鼠标弹起事件 canvas.addEventListener('mouseup',up,false); function down(event) { onoff = true; oldx = event.pageX-10; oldy = event.pagey-10; } function up() { onoff = false; } function draw(event) { if(onoff == true) { var newx = event.pageX-10; var newy = event.pageY-10; ctx.beginPath(); ctx.moveTo(oldx,oldy); ctx.lineTo(newx,newy); ctx.strokeStyle = linecolor; ctx.lineCap = 'round'; ctx.stroke(); oldx = newx; oldy = newy; } } </script> </body> </html>

免费学习视频分享：html视频教程

以上就是html5实现一个简单的在线画板的详细内容，更多请关注聚合云库其它相关文章！

我们先来看看实现效果：

相关热词： HTML HTML5

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jiaob/cssm/4671.shtml

上一篇：html5实现背景音乐的自动播

下一篇：利用html5实现简单的拖动功

微软IE9平台预览版完整支持H	IE9正式版无论从性能提升还是
HTML5 学习总结（四）canvas绘图	canvas与html5实现视频截图成果
html5 canvas常用api总结(二)画图	可以加我的HTML5前端交流群11
HTML5生拖放实例分析	HTML5 和 Flash 区别？
你有认真学习HTML5吗？那么你应	Canvas跨域的解决方案介绍
用canvas实现简单的下雪效果（	刚毕业html5工资一般是多少
HTML5 canvas中如何绘制图像	如何使用HTML5 canvas实现图像的
如何使用HTML5实现多个元素的拖	如何使用HTML5实现拖放单个元素