html5 canvas 学习笔记
简介
Canvas 声明与获取
Canvas 状态保存与恢复
save方法
restore方法
Canvas 坐标系
translate 方法(移动)
scale 方法(缩放)
rotate 方法(旋转)
transform 方法(变形)
示例代码
Canvas 绘制图形
矩形 ( Rectangles )
绘制路径 ( Drawing Paths )
moveTo方法
lineTo方法
arc方法
二次方曲线和贝塞尔曲线 ( Bezier and quadratic curves)
rect方法
示例代码
Cnavas 图片处理
引入图片
drawImage 方法
示例代码
Canvas 颜色、 线型
色彩设置 ( Color )
透明度设置 ( Transparency )
线型 ( Line Styles )
渐变 ( Gradients )
图案 ( Patterns )
阴影 ( Shadows )
Canvas 文本
文本属性
文本方法
示例代码
组合 ( Comositing )
组合方式
裁切路径 ( Clipping paths )
基本动画
开始动画
暂停动画
示例代码
参考资料
Powered by
GitBook
基本动画
基本动画
所谓动画步骤可以理解为动画帧。动画的运动是由连续的帧组成的。因此绘制动画的步骤也就是绘制每一帧动画具体形态的过程。针对 Canvas,绘制一帧应有以下步骤:
清空 Canvas
保存当前 Canvas 状态。 [ctx.save()]
绘制动画图形
恢复 Canvas 状态。 [ctx.restore()]
results matching "
"
No results matching "
"