html5--canvas---绘制坐标变换(以矩形为例)

默认情况下，canvas画布是以左上角为坐标原点，并以一个像素为一个单位绘制图形

1，首先获取我们的画布：

var canvas=document.getElementById(canvasId);

2,获取上下文

var context=canvas.getContext('2d');

3,设置填充样式

context.fillStyle="red";

 

4，变换有三种：translate水平垂直移动，scale水平垂直缩放，rotate旋转

context.translate(x,y);
//向左移动x个单位，向下移动y个单位，x,y为负值是向反方向移动
context.scale(x,y);
//水平放大x倍，垂直放大y倍，x,y小于1，是缩小
context.rotate(Math.PI/10);
//顺时针旋转的角度,负值为逆时针旋转角度

5，填充矩形

context.fillRect(开始坐标x，开始坐标Y,宽,高);

即完成变换

矩阵变换：替代第四步完成变换

当图形上下文倍创建完毕时，事实上也创建了一个默认的变换矩阵，如果不对该变换矩阵进行修改，那么绘制出来的图形就是实际上要绘制的图形，但是如果我们对变换矩阵加以修改，那么绘制出来的就是变换的图形了

context.transform(m11,m12,m21,m22,dx,dy);

其中x,y是原来的坐标，X,Y是变换以后的坐标

例子：context.transform(2.5,0,0,2.5,40,80);

即先将x和y坐标扩展2.5倍，再水平向右移动40px，垂直向下移动80px

 也可参考文章：CSS3 Transform Matrix