復制代碼代碼如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /p p html xmlns="http://www.w3.org/1999/xhtml" head title Canvas /title meta name = "viewport" content = "width = device-width, user-scalable = no" /head body canvas id="canvas" /canvas script type="text/javascript" src="canvasScript.js" charset="utf-8" /script /body /html
JS：
復制代碼代碼如下: //get canvas var canvas = document.getElementById("canvas"); //full screen canvas.width=window.innerWidth; canvas.height=window.innerHeight; //是否支持觸摸 var touchable = 'createTouch' in document; if (touchable) { canvas.addEventListener('touchstart', onTouchStart, false); canvas.addEventListener('touchmove', onTouchMove, false); } else { alert("touchable is false !"); } //上一次觸摸坐標 var lastX; var lastY; /p p var ctx =canvas.getContext("2d"); ctx.lineWidth=10;//畫筆粗細 ctx.stroke ;//畫筆顏色 /p p //觸摸開始事件 function onTouchStart(event) { event.preventDefault(); lastX=event.touches[0].clientX; lastY=event.touches[0].clientY; drawRound(lastX,lastY); /p p } //觸摸滑動事件 function onTouchMove(event) { try { event.preventDefault(); drawLine(lastX,lastY,event.touches[0].clientX,event.touches[0].clientY); lastX=event.touches[0].clientX; lastY=event.touches[0].clientY; } catch(err){ alert( err.description); } /p p } /p p //畫圓 function drawRound(x,y) { ctx.fill ; ctx.beginPath(); ctx.arc(x,y,5,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); } //畫線 function drawLine(startX,startY,endX,endY) { ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(startX,startY); ctx.lineTo(endX,endY); ctx.stroke(); }
