【js学习笔记-112】------<canvas>坐标系变换
来源:互联网 发布:少年三国志 知乎 编辑:程序博客网 时间:2024/06/10 06:36
<canvas>坐标系变换
默认坐标系是以画布最左上角为坐标原点(0,0)。越往右X轴数值越大,越往下Y轴的数值越大。在默认坐标系中,每一个点的坐标都是直接映射到一个CSS像素上。画布上一些特定的操作和属性的设置都使用默认坐标系。然而除了默认坐标系之外,每个画布还有一个还有一个“当前变换距阵”,作为图形状态的一部分。该矩阵定义了画布的当前坐标系。当指定了一个点的坐标后,画布的大部分操作都将该点映射到当前的坐标系中,而不是默认的坐标系。当前变换矩阵是用来指定的坐标转换成为默认坐标系中的等价坐标。坐标的变换还影响了文本和线段的绘制。
调用translate()方法只是简单地将坐标原点进行上、下、左、右移动。
rotate()方法会将坐标轴根据指定角度里进行顺时针旋转。
scale()方法实现对x轴或由y轴上的距离进行延长和缩短。传递负值会实现
scale以坐标原点做参照点将坐标轴进行翻转。就好像镜子中的镜像。
translate用来将坐标原点移动到画布最左下角,然后scale方法用于实现将y轴进行翻转,这样的就变成了越往上y轴越大。
1、从数学角度来理解坐标系变换
translate、rotate和scale方法想象成对坐标轴的变换,就很容易理解了。从代数角度很容易理解坐标变换,就是把变换想像成一个变换后坐标系中的点(x,y),到原来的坐标系统变成了(x`,y`)。
调用 c.translate(dx,dy)。的方法等效如下表达式
x` = x+dx; //新系统中的x轴的0,在原系统中就是dx
y` = y+dy;
c.scale(sx,sy);
x` = sx*x;
y` = sy*y;
c.rotate()
x` =x*cos(a)-y*sin(a);
y` = y*cos(a)+x*sin(a);
坐标系变换的例子
通过递归调用translate()方法、rotate()方法以及scale()方法来实现绘制科赫雪花分形。
例:通过坐标系变换实现绘制科赫雪花
//通过坐标系变换实现绘制科赫雪花
var deg = Math.PI/180; //用于角度到弧度的转换
//在画布上下文c中,在左下角点(x,y)和连长len,绘制一个n级别的科赫雪花分形
function snowfake(c,n,x,y,len){
c.save();
c.translate(x,y); //变换原点为起点
c.moveTo(0,0); //从新的原点开始一条新的子路径
leg(n); //绘制雪花的第一条边
c.rotate(-120*deg);
leg(n);
c.closePath();//闭合子路径
c.restore();//恢复初始的变换
function leg(n){
c.save();
if(n==0){
c.lineTo(len,0)
}else{
c.scale(1/3,1/3);
leg(n-1);
c.rotate(60*deg);
leg(n-1);
c.rotate(-120*deg);
leg(n-1);
c.rotate(60*deg);
leg(n-1);
}
c.restore();
c.translate(len,0);
}
}
snowfake(c,0,5,115,125);
snowfake(c,1,145,115,125);
snowfake(c,2,285,115,125);
snowfake(c,3,425,115,125);
snowfake(c,4,565,115,125);
c.stroke();
- 【js学习笔记-112】------<canvas>坐标系变换
- Html5 Canvas初探学习笔记(6) -变换
- GDI+学习笔记3-坐标系和坐标变换
- Opengl坐标系 坐标变换 笔记
- Html5 Canvas初探学习笔记(13) -图片变换
- 【canvas学习笔记六】状态保存和变换
- 【js学习笔记-110】--------<canvas>中的图形
- 【js学习笔记-111】-----<canvas>图形属性
- 坐标系变换
- 【JS】js学习笔记之canvas基本绘图
- 【学习笔记十】- 使用<canvas>绘图 《js高程》15 笔记
- HTml5 Canvas 整理笔记之图形变换
- html5学习笔记三:canvas中平移,缩放,旋转等图像变换问题
- 【js学习笔记-113】------<canvas>绘制和填充曲线
- MFC学习笔记之坐标系
- Canvas坐标系与绘图坐标系
- canvas变换
- canvas变换
- STL中vector、list、deque的区别
- 字体大小自适应纯css解决方案
- 【Service】Android中Service类onStartCommand
- SQL合并结果集(Union)
- 【设计模式】组合模式
- 【js学习笔记-112】------<canvas>坐标系变换
- Thrift入门
- 求质数算法的N种境界 (N > 10)
- 如何利用链接诱饵来为网站获取强大的流量?
- hdu 1007
- Unity3d教程游戏目标 (GameObjects)停用游戏目标 (GameObjects)
- 简单利用触发器监控表记录的更改
- 重载、覆盖和隐藏
- C++中null与0的区别