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