<!DOCTYPE html PUBLIC “-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN” “http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd”><\/p>\n
<html xmlns=”http:\/\/www.w3.org\/1999\/xhtml”>
\n<head>
\n<title>Canvas<\/title>
\n<meta name = “viewport” content = “width = device-width, user-scalable = no”>
\n<\/head>
\n<body>
\n<canvas id=”canvas” ><\/canvas>
\n<script type=”text\/javascript” charset=”utf-8″>
\n\/\/get canvas
\nvar canvas = document.getElementById(“canvas”);
\n\/\/full screen
\ncanvas.width=window.innerWidth;
\ncanvas.height=window.innerHeight;
\n\/\/\u662f\u5426\u652f\u6301\u89e6\u6478
\n\/\/var touchable = ‘createTouch’ in document;<\/p>\n
var touchable=1;<\/p>\n
if (touchable) {
\ncanvas.addEventListener(‘mousedown’, onTouchStart, false);
\n\/\/ canvas.addEventListener(‘mouseover’, onTouchMove, false);
\ncanvas.addEventListener(‘mouseup’, onTouchMove, false);
\n}
\nelse
\n{
\nalert(“touchable is false !”);
\n}
\n\/\/\u4e0a\u4e00\u6b21\u89e6\u6478\u5750\u6807
\nvar lastX;
\nvar lastY;<\/p>\n
var ctx =canvas.getContext(“2d”);
\nctx.lineWidth=10;\/\/\u753b\u7b14\u7c97\u7ec6
\nctx.strokeStyle=”#FF0000″;\/\/\u753b\u7b14\u989c\u8272<\/p>\n
\/\/\u89e6\u6478\u5f00\u59cb\u4e8b\u4ef6
\nfunction onTouchStart(event) {
\nevent.preventDefault();
\nlastX=event.clientX;
\nlastY=event.clientY;
\ndrawRound(lastX,lastY);<\/p>\n
}
\n\/\/\u89e6\u6478\u6ed1\u52a8\u4e8b\u4ef6
\nfunction onTouchMove(event) {
\ntry
\n{
\nevent.preventDefault();
\ndrawLine(lastX,lastY,event.clientX,event.clientY);
\nlastX=event.clientX;
\nlastY=event.clientY;
\n}
\ncatch(err){
\nalert( err.description);
\n}<\/p>\n
}<\/p>\n
\/\/\u753b\u5706
\nfunction drawRound(x,y)
\n{
\nctx.fillStyle=”#FF0000″;
\nctx.beginPath();
\nctx.arc(x,y,5,0,Math.PI*2,true);
\nctx.closePath();
\nctx.fill();
\n}
\n\/\/\u753b\u7ebf
\nfunction drawLine(startX,startY,endX,endY)
\n{
\nctx.beginPath();
\nctx.lineCap=”round”;
\nctx.moveTo(startX,startY);
\nctx.lineTo(endX,endY);
\nctx.stroke();
\n}<\/p>\n
<\/script>
\n<\/body>
\n<\/html><\/p>\n
<\/p>\n
\u67e5\u770bdemo:\u00a0Noname1<\/a><\/p>\n
![\"2015-11-24_235434\"](\"http:\/\/www.daliane.com\/wp-content\/uploads\/2015\/11\/2015-11-24_235434-300x126.jpg\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"