canvas学习笔记-绘图坐标系
1. 坐标系
画布左上角(0,0)默认原点x
坐标向右方增长,y
坐标则向下方延伸
(图片来自mdn)
不过,Canvas的坐标系统并不是一尘不变的,原点是可改变的。
坐标变换:可以对Canvas坐标系统进行移动translate、旋转rotate和缩放等操作。
坐标变换之后绘制的图形x,y偏移量都以新原点为准, 旋转角度,缩放比,以新坐标系角度为准
例如同样在原点位置写上文字(x:0,y:0), 在(0,50)位置绘制一个矩形,坐标变换前后的效果如下:
这样, 当我们绘制多个图形时,既可以通过计算x,y偏移量控制图形的显示位置,也是通过变换坐标来做
坐标变换是属于绘图状态
存在Canvas绘图的堆栈中的,可以通过save,restore
重置或更新坐标系
坐标示例
相关推荐
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
jinxiutong 2020-05-10
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06
northwindx 2020-04-25