8个最新炫酷的HTML5动画应用
http://www.php100.com/html/it/qianduan/2015/0107/8281.html
另外一个画板demo
http://www.oschina.net/code/snippet_221942_46198
<!DOCTYPE html> <html> <head> <title>h5 demo</title> </head> <body> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body oncontextmenu="return false;" onselectstart="return false;"> <canvas id='canvas' style="border:2px solid blue;margin:2px"></canvas> <div> <button id='c'>clear</button> </div> <script> var canvas = document.getElementById('canvas'); canvas.addEventListener('mousemove', onMouseMove, false); canvas.addEventListener('mousedown', onMouseDown, false); canvas.addEventListener('mouseup', onMouseUp, false); canvas.addEventListener('touchstart',onMouseDown,false); canvas.addEventListener('touchmove',onMouseMove,false); canvas.addEventListener('touchend',onMouseUp,false) canvas.height = 300; canvas.width = getWidth() - 50; var ctx = canvas.getContext('2d'); ctx.lineWidth = 3.0; // 设置线宽 ctx.strokeStyle = "#CC0000"; // 设置线的颜色 var flag = false; function onMouseMove(evt) { evt.preventDefault(); if (flag) { var p = pos(evt); ctx.lineTo(p.x, p.y); ctx.lineWidth = 6.0; // 设置线宽 ctx.shadowColor = "#CC0000"; ctx.shadowBlur = 1; //ctx.shadowOffsetX = 6; ctx.stroke(); } } function onMouseDown(evt) { evt.preventDefault(); ctx.beginPath(); var p = pos(evt); ctx.moveTo(p.x, p.y); flag = true; } function onMouseUp(evt) { evt.preventDefault(); flag = false; } var clear = document.getElementById('c'); clear.addEventListener('click',function() { ctx.clearRect(0, 0, canvas.width, canvas.height); },false); function pos(event) { var x,y; if(isTouch(event)){ x = event.touches[0].pageX; y = event.touches[0].pageY; }else{ x = event.layerX; y = event.layerY; } return {x:x,y:y}; } function isTouch(event) { var type = event.type; if(type.indexOf('touch')>=0){ return true; }else{ return false; } } function getWidth() { var xWidth = null; if (window.innerWidth !== null) { xWidth = window.innerWidth; } else { xWidth = document.body.clientWidth; } return xWidth; } </script> </body> </html>