画布canvans中的坐标
来源:互联网 发布:ubuntu有哪些好的软件 编辑:程序博客网 时间:2024/06/05 07:35
默认坐标系与当前坐标系
canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸。左上角坐标为x=0,y=0的点称作原点。在默认坐标系中,每一个点的坐标都是直接映射到一个CSS像素上。
但是如果图像的每次绘制都参考一个固定点将缺少灵活性,于是在canvas中引入“当前坐标系”的概念,所谓“当前坐标系”即指图像在此时绘制的时候所参考的坐标系,它也会作为图像状态的一部分。比如rotate
旋转操作,改变当前坐标系也就是改变了rotate
的参考点,试想下如果没有当前坐标系的概念,无论是旋转,缩放,倾斜等操作不就只能参考画布左上角原点了吗。
注:以下的context均为 getContext("2d")所得的CanvasRenderingContext2D
对象。
默认坐标系如下图所示:
1. 如果调用context.translate(100,50),当前坐标系与默认坐标系相对位置如下图
2. 如果调用context.scale(2,2),当前坐标系与原默认坐标系的刻度如下,红色代表当前坐标系
3. 如果调用context.rotate(Math.PI/6)顺时针旋转30度,当前坐标系与默认坐标系相对位置如下图
矩阵变换transform
上文提到的坐标变形的三种方式,平移translate,缩放scale以及旋转rotate都可以通过transform做到。
现在我们先来看看矩阵变换的定义:Context.transform(m11,m12,m21,m22,dx,dy),该方法使用一个新的变化矩阵与当前变换矩阵进行乘法运算。
m11m21dxm12m22dy001
也就是说假设A(x,y)要变换成B(x’,y’)可以通过乘以上述矩阵即可得到。
1 平移context.translate(dx,dy)
x’=x+dx
y’=y+dy
可以使用context.transform (1,0,0,1,dx,dy)代替context.translate(dx,dy)。
也可以使用context.transform(0,1,1,0.dx,dy)代替。
2 缩放context.scale(sx, sy)
x’=sx*x
y’=sy*y
(其中,sx 和sy分别表示在x轴和y轴上的缩放倍数)
可以使用context.transform(sx,0,0,sy,0,0)代替context.scale(sx, sy);
也可以使用context.transform (0,sy,sx,0, 0,0)代替;
3 旋转context.rotate(θ)
x’=x*cosθ-y*sinθ
y’=x*sinθ+y*cosθ
可以用context.transform(Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180),-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),0,0)替代context.rotate(θ)。
也可以使用context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180), 0,0)替代。
- 画布canvans中的坐标
- OpenPainter: 画布坐标系统
- HTML5画布鼠标坐标教程
- Unity世界坐标转为画布坐标
- canvans画圆
- Android 画布学习Canvas (1)坐标
- Canvas----h5中的画布
- h5中的画布----Canvas
- Android中的画布绘制(一)
- canvas中的清空画布
- canvans学习(三)
- canvans学习(五)
- html5 画图canvans
- canvans 粒子背景特效
- android Google Map定位及创建画布标示坐标点
- 画布
- 画布
- 画布
- 致诸弟·劝弟谨记进德修业
- HUCM Contest 2016-02
- poj1699Best Sequence(TSP)
- 在web分发企业级app
- 25个经典的Spring面试问答
- 画布canvans中的坐标
- ZeroMQ,史上最快的消息队列 —– ZMQ的学习和研究
- Web.xml Webapp配置加载log4j和Spring
- 2016 cocoapods的安装和使用以及版本升级遇到的问题
- Eclipse中导入外部jar包
- poj Equations
- 架构阅读-文章列表
- android平台Camera采集数据ffmpeg进行编码探究
- Educational Codeforces Round 12 B STL vector