html5动画-canvas
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
html5动画-canvas
目录
1
Html5动画概述
2
Canvas基础
3
Canvas进阶
2
HTML5动画 CANVAS SVG
css3-animate
我眼中的HTML5动画
css3-animate是最简单也是最复杂的动画效果，牵涉到浏览器的兼容， 容易出现无法各种各样的问题 SVG完善可以做任何想做的图片，与其他标准兼容，但是基于DOM的操作， 复杂的情况下动画效果变慢 CANVAS兼容性强，但如果位置发生变化，那么整个场景也需要重新绘制， 速度有待考虑
•
•
ctx.translate(400,100);
相对于(0,0)
•
HTML 5 Canvas 参考手册
•
http://www.w3school.com.cn/tags/html_ref_canvas.asp
目录
1
Html5动画概述
2
Canvas基础
3
Canvas进阶
10
Canvas进阶-动画(老虎机,大转盘,倒计时)
目录
1
Html5动画概述
2
Canvas基础
3
Canvas进阶
5
Canvas基础-概述
百度百科
http://baike.baidu.com/item/canvas/16416421#viewPageContent w3school
http://www.w3school.com.cn/html5/html5_canvas.asp
Thank You！
Canvas基础-画布 • 画布
• • • <canvas id="canvas" style="margin:0 auto;border: 1px solid #000000"> 您的浏览器不支持canvas！ </canvas>
• • • • •
canvas = document.getElementById('canvas); canvas.width=400; canvas.height=400; if (canvas.getContext) { ctx = canvas.getContext('2d');
Canvas基础-作图
• • • 路径闭包 ctx.beginPath(); ctx.closePath();
•
• • •
保存Fra Baidu bibliotek下文环境
ctx.save(); ctx.restore(); 拉伸
•
• • •
ctx.scale(1.2,1.2);
旋转 ctx.rotate(-Math.PI/3); 位移
•
}
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();
目录
1
Html5动画概述
2
Canvas基础
3
Canvas进阶
2
HTML5动画 CANVAS SVG
css3-animate
我眼中的HTML5动画
css3-animate是最简单也是最复杂的动画效果，牵涉到浏览器的兼容， 容易出现无法各种各样的问题 SVG完善可以做任何想做的图片，与其他标准兼容，但是基于DOM的操作， 复杂的情况下动画效果变慢 CANVAS兼容性强，但如果位置发生变化，那么整个场景也需要重新绘制， 速度有待考虑
•
•
ctx.translate(400,100);
相对于(0,0)
•
HTML 5 Canvas 参考手册
•
http://www.w3school.com.cn/tags/html_ref_canvas.asp
目录
1
Html5动画概述
2
Canvas基础
3
Canvas进阶
10
Canvas进阶-动画(老虎机,大转盘,倒计时)
目录
1
Html5动画概述
2
Canvas基础
3
Canvas进阶
5
Canvas基础-概述
百度百科
http://baike.baidu.com/item/canvas/16416421#viewPageContent w3school
http://www.w3school.com.cn/html5/html5_canvas.asp
Thank You！
Canvas基础-画布 • 画布
• • • <canvas id="canvas" style="margin:0 auto;border: 1px solid #000000"> 您的浏览器不支持canvas！ </canvas>
• • • • •
canvas = document.getElementById('canvas); canvas.width=400; canvas.height=400; if (canvas.getContext) { ctx = canvas.getContext('2d');
Canvas基础-作图
• • • 路径闭包 ctx.beginPath(); ctx.closePath();
•
• • •
保存Fra Baidu bibliotek下文环境
ctx.save(); ctx.restore(); 拉伸
•
• • •
ctx.scale(1.2,1.2);
旋转 ctx.rotate(-Math.PI/3); 位移
•
}
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();