H5小游戏 - 涂鸦板
效果截图：
html代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>H5 canvas涂鸦板制作</title><script>window.onload=function(){var startX,startY;var flag=false;var c=document.getElementById("mycanvas");var ctx=c.getContext("2d");//获取画笔ctx.lineWidth=5;//设置线宽ctx.strokeStyle="rgba(255,0,0,0.5)";//设置样式//ctx.moveTo(100,80);//画笔移动到 起点//ctx.lineTo(300,200);//画笔移动到某点的坐标//ctx.stroke();//渲染//添加鼠标响应事件 监听事件c.addEventListener("mousedown",function(){//alert("点");var evt = evt || window.event; //兼容性的 evt 或者在 IE浏览器下是window.event//alert(evt.clientX+","+evt.clientY);startX=evt.clientX-10;startY=evt.clientY-10;//定义if(!flag){startX=evt.clientX-10;startY=evt.clientY-10;ctx.moveTo(startX,startY);flag=true;}//if(flag){//ctx.lineTo(evt.clientX-10,evt.clientY-10);//ctx.stroke();//渲染//}else{//startX=evt.clientX-10;//startY=evt.clientY-10;//ctx.moveTo(startX,startY);//flag=true;//}});c.addEventListener("mousemove",function(){//此时 flag=trueif(flag){var evt = evt || window.event;var curX = evt.clientX-10;//获取鼠标当前的位置var curY = evt.clientY-10;ctx.lineTo(curX, curY);ctx.stroke();//渲染}});c.addEventListener("mouseup",function(){flag=false;});}</script></head><body><canvas id="mycanvas" width="800" height="600" style="border: 1px solid blue;"></canvas></body></html>
以上就是关于 “ H5小游戏 - canvas涂鸦板 ” 的全部内容。
