<!DOCTY
PE html P
ubLIC "-//W3C//DTD XHTML 1.0 Trans
ITional//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 n
ame = "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>
//get canvas
VAR canvas = document.getElementById("canvas");
//full screen
canvas.width=window.innerWidth;
canvas.h
eight=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.
strokeStyle="
#FF0000";//画笔颜色</p>
<p>//触摸开始事件
function onTouchStart(event) {
event.p
reventDefault();
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.fillStyle="#FF0000";
ctx.be
ginPath();
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.l
ineto(endX,endY);
ctx.stroke();
}