大佬教程收集整理的这篇文章主要介绍了HTML5简易涂鸦板制作，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
代码清单1
<!DOCTYPE html>
@H_419_20@<html>
@H_419_20@<head>
@H_419_20@<Meta charset="utf-8" />
@H_419_20@<title>@H_419_20@</title>
@H_419_20@<script> var startX,startY; var flag = @R_696_11372@se; window.onload = function(){ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.lineWidth = 10; ctx.strokeStyle = "rgba(255,0.5)"; ctx.stroke(); //---- 添加鼠标响应事件---- c.addEventListener("mousedown",function(){ var evt = evt || window.event; if(!flag){ startX = evt.clientX-10; startY = evt.clientY-10; ctx.moveTo(startX,startY); flag = true; } }) c.addEventListener("mousemove",function(){ if(flag){ var evt = evt || window.event;//mouse position var curX = evt.clientX-10; var curY = evt.clientY-10; ctx.lineTo(curX,curY); ctx.stroke(); } }) c.addEventListener("mouseup",function(){ flag = @R_696_11372@se; }) } @H_419_20@</script>
@H_419_20@</head>
@H_419_20@<body>
@H_419_20@<canvas id="myCanvas" width="800" height="600" style="position:absolute;left:10px;top:10px;border: 1px solid blue;;">@H_419_20@</canvas>
@H_419_20@</body>
@H_419_20@</html>
以上是大佬教程为你收集整理的HTML5简易涂鸦板制作全部内容，希望文章能够帮你解决HTML5简易涂鸦板制作所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。