html5动画-canvas

html5动画-canvas目录2Canvas基础12Html5动画概述Canvas进阶3HTML5动画CANVASSVGcss3-animatecss3-animate是最简单也是最复杂的动画效果，牵涉到浏览器的兼容，容易出现无法各种各样的问题SVG完善可以做任何想做的图片，与其他标准兼容，但是基于DOM的操作，复杂的情况下动画效果变慢我眼中的HTML5动画CANVAS兼容性强，但如果位置发生变化，那么整个场景也需要重新绘制，速度有待考虑目录5Html5动画概述12Canvas基础Canvas进阶3Canvas基础-概述百度百科w3school://baike.baidu.com/item/canvas/16416421#viewPageContentCanvas基础-画布•画布•canvasid=canvasstyle=margin:0auto;border:1pxsolid#000000•您的浏览器不支持canvas！•/canvas•canvas=document.getElementById('canvas);•canvas.width=400;•canvas.height=400;•if(canvas.getContext){•ctx=canvas.getContext('2d');•}Canvas基础-作图•直线•ctx.moveTo(x,y)•ctx.lineTo(x,y)•圆•ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)•方形•ctx.rect(x,y,width,height)•文本•ctx.fillText(string,x,y);ctx.strokeText(Hello!,10,50);•划线•ctx.strokeStyle=#CC0000;•ctx.stroke();•填充•ctx.fillStyle=#008600;•ctx.fill();Canvas基础-作图•路径闭包•ctx.beginPath();•ctx.closePath();•保存上下文环境•ctx.save();•ctx.restore();•拉伸•ctx.scale(1.2,1.2);•旋转•ctx.rotate(-Math.PI/3);•位移•ctx.translate(400,100);•相对于(0,0)•HTML5Canvas参考手册•目录10Html5动画概述12Canvas进阶Canvas基础3Canvas进阶-动画(老虎机,大转盘,倒计时)ThankYou！