使用HTML5做个画图板的方法介绍(3)

tryjaQHTML5中文学习网 - HTML5先行者学习网

{jaQHTML5中文学习网 - HTML5先行者学习网

event.preventDefault();jaQHTML5中文学习网 - HTML5先行者学习网

drawLine(lastX,lastY,event.touches[0].clientX,event.touches[0].clientY);jaQHTML5中文学习网 - HTML5先行者学习网

lastX=event.touches[0].clientX;jaQHTML5中文学习网 - HTML5先行者学习网

lastY=event.touches[0].clientY;jaQHTML5中文学习网 - HTML5先行者学习网

}jaQHTML5中文学习网 - HTML5先行者学习网

catch(err){jaQHTML5中文学习网 - HTML5先行者学习网

alert( err.description);jaQHTML5中文学习网 - HTML5先行者学习网

}</p><p>}</p><p>//画圆jaQHTML5中文学习网 - HTML5先行者学习网

function drawRound(x,y)jaQHTML5中文学习网 - HTML5先行者学习网

{jaQHTML5中文学习网 - HTML5先行者学习网

ctx.fillStyle="#FF0000";jaQHTML5中文学习网 - HTML5先行者学习网

ctx.beginPath();jaQHTML5中文学习网 - HTML5先行者学习网

ctx.arc(x,y,5,0,Math.PI*2,true);jaQHTML5中文学习网 - HTML5先行者学习网

ctx.closePath();jaQHTML5中文学习网 - HTML5先行者学习网

ctx.fill();jaQHTML5中文学习网 - HTML5先行者学习网

}jaQHTML5中文学习网 - HTML5先行者学习网

//画线jaQHTML5中文学习网 - HTML5先行者学习网

function drawLine(startX,startY,endX,endY)jaQHTML5中文学习网 - HTML5先行者学习网

{jaQHTML5中文学习网 - HTML5先行者学习网

ctx.beginPath();jaQHTML5中文学习网 - HTML5先行者学习网

ctx.lineCap="round";jaQHTML5中文学习网 - HTML5先行者学习网

ctx.moveTo(startX,startY);jaQHTML5中文学习网 - HTML5先行者学习网

ctx.lineTo(endX,endY);jaQHTML5中文学习网 - HTML5先行者学习网

ctx.stroke();jaQHTML5中文学习网 - HTML5先行者学习网

}jaQHTML5中文学习网 - HTML5先行者学习网

jaQHTML5中文学习网 - HTML5先行者学习网

jaQHTML5中文学习网 - HTML5先行者学习网

关键点：jaQHTML5中文学习网 - HTML5先行者学习网

ctx.lineCap="round"; 设置所画线条结束的样式帽为圆形。这个很关键，不然条角度变化大的地方会出现断带。jaQHTML5中文学习网 - HTML5先行者学习网

jaQHTML5中文学习网 - HTML5先行者学习网

event.preventDefault();取消事件的默认动作。在滑动事件中一定要调这个方法。不然滑动时就会触发浏览器默认的滑动事件，就会发生页面下拉的效果，你就画不了画喽。jaQHTML5中文学习网 - HTML5先行者学习网

jaQHTML5中文学习网 - HTML5先行者学习网

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-23011-3.html