html5 canvas常用api总结(三)--图像变换API

2022-11-17 15:04:01

canvas的图像变换api，可以帮助我们更加方便的绘画出一些酷炫的效果，也可以用来制作动画。接下来将总结一下canvas的变换方法，文末有一个例子来更加深刻的了解和利用这几个api。

1.画布旋转api

这里要先了解另一个api

translate(x,y):重新定义画布上（0，0）的位置。

首先定义一个旋转的角度a,比如想要旋转45度。

a=45*Math.PI/180

rotate(a):rotate的旋转参数是弧度。注意，旋转之前要先设定旋转的中心点。

function cxt_rotate() {

        var ctx = document.getElementById("trascanvas0").getContext("2d");

        ctx.save();

        ctx.fillStyle="#396";

        var angle=-45*Math.PI/180;

        ctx.translate(150,150);//定义中心点

        ctx.rotate(angle);//旋转

        ctx.fillRect(-75,-50,100,100);//画图

        ctx.restore();

};

这里要注意，rotate函数写了之后，才会旋转，如果提前画图，再写rotate会发现并没有什么卵用……

画图的时候，由于我们重新定义了（0，0）点，所有我们画图的时候，起始点要减去长和宽的一半。

2.平移api

translate(x,y):第一个参数是X轴的平移大小，第二个参数是Y轴的平移大小。

function cxt_translate() {

        var ctx = document.getElementById("trascanvas1").getContext("2d");

        ctx.fillStyle="#987";

        ctx.translate(100,200);

        ctx.fillRect(0,0,50,100);

};

translate这个api讲回话远点移动到参数的位置，把这里当做（0，0）开始回话，经常用在放大缩小，旋转等变换中设置中心点。

2.缩放api

scale(x,y):第一个参数是X轴的缩放值，第二个参数是Y轴的缩放值。

function cxt_scale() {

        var ctx = document.getElementById("trascanvas2").getContext("2d");

        ctx.fillStyle="#666";

        ctx.fillRect(0,0,100,100);

        ctx.fillStyle="#693";

        ctx.scale(2,2);

        ctx.globalCompositeOperation ="destination-atop";//合成

        ctx.fillRect(0,0,100,100);

};

图中灰色的图是正常大小，绿色的是经过scale放大的。

注意：代码中globalCompositeOperation这个api是用来处理两个图之间的合成关系的。

3.变换矩阵transform&setTransform

context.transform(a,b,c,d,e,f):

context.setTransform(a,b,c,d,e,f):

a:水平缩放，b：水平倾斜，c：垂直倾斜，d：垂直缩放，e：水平位移，f：垂直移动

当图经过了很多次变换之后，我们可以在变换的前后使用save()&restore()来保存状态，或者直接在变换前使用setTransform(1,0,0,1,0,0)来重置画布。

function cxt_transform() {

        var ctx = document.getElementById("trascanvas3").getContext("2d");

        ctx.save();

        ctx.fillStyle="yellow";

        ctx.fillRect(0,0,250,100)

        ctx.setTransform(1,0.5,-0.5,1,30,10);

        ctx.fillStyle="red";

        ctx.fillRect(0,0,250,100);

        ctx.transform(1,0.5,-0.5,1,30,10);

        ctx.fillStyle="blue";

        ctx.fillRect(0,0,250,100);

        ctx.restore();

        //ctx.setTransform(1,0,0,1,0,0);

        ctx.fillStyle="yellow";

        ctx.translate(300,0);

        ctx.fillRect(0,0,250,100);

};