今天小编跟大家讲解下有关html5教程制作简单画板代码分享 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html5教程制作简单画板代码分享 的相关资料，希望小伙伴们看了有所帮助。
HTML5制作简单画板
复制代码代码如下:<!DOCTYPE HTML><html lang="en-US"><head> <title></title> <meta charset="UTF-8"> <script src="https://www.aidi.net.cn//html5/<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script</a>></head><style>canvas{ border:2px solid #000;}</style><body> <canvas id="draw"width="500"height="500"></canvas> <script type="text/javascript"> $(document).ready(function(){ var canvas=document.getElementById("draw"); var draw=canvas.getContext("2d"); draw.lineWidth=5; //线条粗细 draw.strokeStyle="red"; //颜色 var godraw=false; //按下鼠标 $("#draw").mousedown(function(e){ //准确坐标 var mouseX=e.pageX-this.offsetLeft; var mouseY=e.pageY-this.offsetTop; draw.moveTo(mouseX,mouseY); godraw=true;</p><p> }) //放开鼠标 $("#draw").mouseup(function(e){ godraw=false; }) //移动鼠标 $("#draw").mousemove(function(e){ if(godraw){ var mouseX=e.pageX-this.offsetLeft; var mouseY=e.pageY-this.offsetTop; draw.lineTo(mouseX+4,mouseY+4); draw.stroke(); }</p><p> }) }) </script></body></html>效果图
来源：爱蒂网
