canvas
2019-08-13 10:15:59 0 举报AI智能生成
Css3 Canvas的学习脑图
作者其他创作
大纲/内容
共同属性
绘制边框
边框颜色
实心填充
填充颜色
共同方法
状态
保存save、恢复restore
特殊属性
线条宽度
线条帽子
矩形
圆
文字
数据结构
字体大小
图片
数据结构
x、y坐标
图片来源
长度、宽度
切图
目标x、y坐标
目标长度、宽度
动画
API
请求动画帧
requestAnimationFrame
requestAnimationFrame
取消动画帧
cancelAnimationFrame
cancelAnimationFrame
动画流畅原理
1000ms / 60帧 = 16.7ms/帧
变形
移动坐标原点
translate
translate
数据结构
x、y坐标
旋转坐标轴X
rotate
rotate
数据结构
旋转角度
放大缩小
scale
scale
数据结构
x轴倍数
y轴倍数
变形矩阵
transform
transform
数据结构
变形矩阵
a, c, 0
b, d, 0
a, c, 0
b, d, 0
原x、y坐标
线条
数据结构
x、y坐标
路径
是否闭合
三角形
通过线条闭合
矩形
数据结构
x、y坐标
长度、宽度
圆
数据结构
x、y坐标
半径
起点、结束角度
顺、逆时针绘制
贝塞尔曲线
算法：贝塞尔
AE\AB = CG\CD = EF\EG
算出所有这个比例的F点，用A点逐个连接起来，就是贝塞尔曲线
算出所有这个比例的F点，用A点逐个连接起来，就是贝塞尔曲线
常用
一次曲线
二次曲线
N次曲线
裁剪路径
1、把已经创建的路径转化成裁剪路径
2、只能遮罩调用clip后面的图形
合成
source
destination
lighter
lighten
darken
xor
copy
0 条评论
下一页
