博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
canvas学习笔记-绘图坐标系
阅读量:6452 次
发布时间:2019-06-23

本文共 337 字,大约阅读时间需要 1 分钟。

1. 坐标系

画布左上角(0,0)默认原点
x坐标向右方增长,
y坐标则向下方延伸

clipboard.png

(图片来自mdn)

不过,Canvas的坐标系统并不是一尘不变的,原点是可改变的。
坐标变换:可以对Canvas坐标系统进行移动translate、旋转rotate和缩放等操作。
坐标变换之后绘制的图形x,y偏移量都以新原点为准, 旋转角度,缩放比,以新坐标系角度为准

例如同样在原点位置写上文字(x:0,y:0), 在(0,50)位置绘制一个矩形,坐标变换前后的效果如下:

clipboard.png

这样, 当我们绘制多个图形时,既可以通过计算x,y偏移量控制图形的显示位置,也是通过变换坐标来做
坐标变换是
属于绘图状态存在Canvas绘图的堆栈中的,可以通过
save,restore重置或更新坐标系

坐标示例

转载地址:http://dlgwo.baihongyu.com/

你可能感兴趣的文章
Cygwin--unix/linux模拟环境[转]
查看>>
SQL中EXISTS的用法
查看>>
nodeJS基础:模块系统
查看>>
WPF资料链接
查看>>
牛客挑战29B. 白井黑子【素因子分解,】
查看>>
过滤DataTable表中的重复数据
查看>>
Jmeter 同一个测试计划下的多个线程组 执行顺序 希望调整为顺序执行
查看>>
Oracle数据库-trunc函数的用法
查看>>
prepare for travel 旅行准备
查看>>
再次更新
查看>>
perl杂记
查看>>
go语言安装使用
查看>>
iOS开发代理(委托)模式详解
查看>>
微服务学习笔记二:Eureka服务注册发现
查看>>
C# 获取编码
查看>>
mysql的数据类型int、bigint、smallint 和 tinyint取值范围
查看>>
利用网易获取所有股票数据
查看>>
HDOJ5015 233 Matrix(矩阵乘法加速递推)
查看>>
三种局域网扫描工具比较
查看>>
移动铁通宽带上网设置教程
查看>>