canvas的transform

canvas的transform是 Canvas 2D API 使用单位矩阵重新设置(覆盖)当前的变换并调用变换的方法。
transform的参数(x缩放, y倾斜偏移, x倾斜偏移, y缩放, x位移, y位移);
so默认值是transfrom(1, 0, 0, 1, 0, 0);

1、用transform实现translate

transform(1, 0, 0, 1, x偏移, y偏移)

2、用transform实现scale(x, y)

transform(x, 0, 0, y, 0, 0);

3、用transform实现rotate(angle)

transform(cos(angle), sin(angle), -sin(angle), cos(angle), 0, 0)

4、transform、setTransform和resetTransform

transform是在之前的矩阵值上累加(multiple)
setTransform是重置到单位矩阵后(1, 0, 0, 1, 0, 0),在用相同参数调用transform
reseTransform:重置到单位矩阵(1, 0, 0, 1, 0, 0)

5、canvas绕(x, y) 旋转angle

translate(x, y);
rotate(angle)
translate(-x, -y);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.绘图 fillRect(x, y, width, height)[https://developer.mozi...
    SnuggleE阅读 657评论 0 0
  • canvas能干啥?绘制矩形先上代码,干了这杯! 当然,还可以有另一种形式: 1、绘制矩形 总结:style确定样...
    wsgdiv阅读 422评论 0 0
  • 1 Canvas接口元素定义 1.1 getContext()方法 为了在canvas上绘制,你必须先得到一个画布...
    Kevin_Junbaozi阅读 1,359评论 1 2
  • 一、简介 是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、...
    Adoins阅读 2,276评论 0 2
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,973评论 3 40