canvas简单画图板
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>canvas{border: 1px solid #000;}</style></head><body><script src="jQuery-HY-1.0.1.js"></script><input id="inp1" type="color"><input id="inp2" type="range" value="1" min="1" max="40"><button>橡皮</button><canvas width="400" height="400"></canvas><script>var inp1=document.getElementById("inp1");var inp2=document.getElementById("inp2");var can=document.getElementsByTagName("canvas")[0];var btn=document.getElementsByTagName("button")[0];var ctx=can.getContext("2d");inp1.onchange=function(){ctx.strokeStyle=this.value;}inp2.onchange=function(){ctx.lineWidth=this.value;}btn.onclick=function(){ctx.clearRect(0,0,1000,400);}can.onmousedown=function(event){event=event||window.event;var movex=getPageXY(event).x-can.offsetLeft;var movey=getPageXY(event).y-can.offsetTop;ctx.lineCap="round";ctx.beginPath();ctx.moveTo(movex,movey);document.onmousemove=function(event){event=event||window.event;var endx=getPageXY(event).x-can.offsetLeft;var endy=getPageXY(event).y-can.offsetTop;ctx.lineTo(endx,endy);ctx.stroke();}}document.onmouseup=function(){document.onmousemove=null;}</script></body></html>
如果觉得《canvas简单画图板》对你有帮助，请点赞、收藏，并留下你的观点哦！
