canvas transform参数解析

2,180 阅读3分钟

最近正在学习canvas中,今天学到了transform这个方法,6个参数看的脑阔疼,查了一些资料才算领悟了一些,这篇文章算是用来记录接下去的一些猜想以及证明猜想的过程。

前言:在本人的概念中,整个canvas画布就是一个以左上角为原点的平面直角坐标系(不知道的请回顾奇变偶不变.),这样一来很多概念就比较容易代入理解了。 就是这样:

官方的参数解释

1.a 水品缩放

改变x轴的单位长度。解释:画布宽度即x轴总长假设为600px,在默认情况下单位长度应为1px,也就是说x轴的长度为1px(单位长度)*600(长度)=600px(总长度),此时改变a的值即修改x轴单位长度,假如单位长度改为2px,那么原来有一个矩形如果它的宽度是200单位,也就是200✖1px=200px 但是因为此时单位长度改成了2px 于是它的现宽度就变成了200✖2px=400px,这样该矩形就算水平放大(变宽)了

写个demo

function draw(){
    var canvas = document.getElementById('canvas');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.save(); 
    ctx.fillStyle='Red';
    ctx.fillRect(0, 0, 100, 100);
    ctx.transform(2,0,0,1,0,0);//将参数a的值改为2,其他默认不变
    ctx.fillStyle='Green';
    ctx.fillRect(100, 100, 100, 100);
}
draw();

结果:

可以看到绿色矩形,因为x轴的单位长度被改为2,所以它的fill参数变成了(100✖2px,100✖1px,100✖2px,100✖1px)

2.b 水平倾斜 就是x轴倾斜呗,x轴和y轴夹角一般固定为90度,在设置了倾斜以后,x轴会按照设定值旋转角度。 写写看

function draw(){
    var canvas = document.getElementById('canvas');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.save(); 
    ctx.translate(200, 200);//为了方便观察,将原点移到(200,200)的位置
    ctx.beginPath();//开始画线
    ctx.moveTo(0,0);//将起点移到下面
    ctx.lineTo(100, 0);
    ctx.closePath();
    ctx.strokeStyle='Red';//画红线
    ctx.stroke();
    ctx.transform(1,0.5,0,1,0,0);//x轴倾斜
    ctx.beginPath();//开始画线
    ctx.moveTo(0,0);//将起点移到下面
    ctx.lineTo(200, 0);
    ctx.strokeStyle='Green';//画绿线
    ctx.closePath();
    ctx.stroke();
}
draw();

结果:

可以看到绿线(x轴)是按照b的值(0.5)以原点为定点进行了一定度数的旋转,至于具体是个什么关系,经过我修改B的数值来观察,x轴的倾斜和b参数数值的关系为:

当b为正数时,x轴(水平方向)以原点为定点顺时针旋转角度,角度和b的数值关系式不知道(对不起我数学差),b数值从0到无穷大对应旋转0-90°,当b=1时,应该是旋转45°。当b为负数时,x轴(水平方向)则逆时针旋转

注:上述结论仅是个人观察结果,并不准确。有错望告知,感激不敬!。。突然想起来这个好像和三角函数的tan45=1有关系啊。。。算了先不管*-*

3.c 垂直缩放请参考1 4.d 垂直倾斜请参考2

5和6就不说了,水平移动即向x轴方向移动e单位,垂直移动即向y轴方向移动f单位,要注意的是水平方向有时候并不一定是3点钟方向,x轴是会旋转的 当然垂直方向也一样。