用Canvas做动画

之前看过不少HTML5动画的书,讲解的是如何去做,对于其中的数学原理讲解的不详细,常有困惑。最近看的《HTML5+JavaScript 动画基础》这个是译本,Keith Peters曾写过《Foundation ActionScript Animation》其中的数学原理被不少人转载引用,学习过AS的对这本书应该有了解。基于此,才有的这本书,HTML5版本的动画原理。哈哈,庆幸我是数学出身的~~~ 这本书上有些bug,本来做了记录,结果被当废纸扔掉了 - -!目前不能分享,只能在看的时候再记录一遍。

前段时间忙事情随笔停了,现趁春节来个年末奋斗学习!大致顺序,先理解浏览器动画原理,再熟悉canvas,再用canvas做游戏 !

暂定目录如下,Canvas的部分我主要翻译 Safari开发者Canvas Introduction ,对比而言它讲解的比较全比较偏原理吧,其它主要讲用法。

其它文献引用,我会加在尾部哦,如有遗漏请联系我哦~~~

1、JavaScript的单线程性质以及定时器的工作原理

2、requestAnimationFrame

Canvas

第一、介绍Canvas

canvas标签
针对Retina设备

第二、画线和路径

设置描边和填充样式
画矩形
路径和子路径
设置线的顶端和连接处
第三 画曲线
贝塞尔或者二次方程曲线
画弧线
认识曲线中的arcTo
---后续有个画箭头

第四 渐变和图案

线性渐变
径向渐变
图案

第五 使用预绘制图片

绘制图像
按照给定的宽高绘制图像
绘制带测绘区region mapping 的图像

第六 添加文字

字体设置
文字的方向
文字对齐
基准线
---Bounding Box Width

原文地址:https://www.cnblogs.com/yixiaoheng/p/canvas-animation-0.html