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

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

//get canvasjaQHTML5中文学习网 - HTML5先行者学习网

var canvas = document.getElementById("canvas");jaQHTML5中文学习网 - HTML5先行者学习网

//full screenjaQHTML5中文学习网 - HTML5先行者学习网

canvas.width=window.innerWidth;jaQHTML5中文学习网 - HTML5先行者学习网

canvas.height=window.innerHeight;jaQHTML5中文学习网 - HTML5先行者学习网

//是否支持触摸jaQHTML5中文学习网 - HTML5先行者学习网

var touchable = 'createTouch' in document;jaQHTML5中文学习网 - HTML5先行者学习网

if (touchable) {jaQHTML5中文学习网 - HTML5先行者学习网

canvas.addEventListener('touchstart', onTouchStart, false);jaQHTML5中文学习网 - HTML5先行者学习网

canvas.addEventListener('touchmove', onTouchMove, false);jaQHTML5中文学习网 - HTML5先行者学习网

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

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

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

alert("touchable is false !");jaQHTML5中文学习网 - HTML5先行者学习网

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

//上一次触摸坐标jaQHTML5中文学习网 - HTML5先行者学习网

var lastX;jaQHTML5中文学习网 - HTML5先行者学习网

var lastY;</p><p>var ctx =canvas.getContext("2d");jaQHTML5中文学习网 - HTML5先行者学习网

ctx.lineWidth=10;//画笔粗细jaQHTML5中文学习网 - HTML5先行者学习网

ctx.strokeStyle="#FF0000";//画笔颜色</p><p>//触摸开始事件jaQHTML5中文学习网 - HTML5先行者学习网

function onTouchStart(event) {jaQHTML5中文学习网 - HTML5先行者学习网

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

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

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

drawRound(lastX,lastY);</p><p>}jaQHTML5中文学习网 - HTML5先行者学习网

//触摸滑动事件jaQHTML5中文学习网 - HTML5先行者学习网

function onTouchMove(event) {jaQHTML5中文学习网 - HTML5先行者学习网

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