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

2017-01-03 07:43:04来源:作者:人点击

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);};






可以看到,最后一个黄色矩形按照正常的方式显示在(300,0)的位置。蓝色矩形则是在红色矩形的基础上变化。我们把上图的红色代码换成:ctx.setTransform(1,0.5,-0.5,1,30,10);

可以看到结果如下:



由于在蓝色部分重置了变换矩阵,重新构建了矩阵,所以红色矩型被蓝色矩形遮盖了。

所以我们看到setTransform()和transform之间的差别就是,前者会重置上次变换然后重新构建新的变换矩阵,而后者直接在上次的变换基础上构建新的变换。



合成--如何摆放两个重叠的图层

context.globalCompositeOperation="source-in";

源图形:要绘制在画布上的形状。

目标图形:已经显示在画布上的图。

这个api有很多的属性:(绿色为即将画的,灰色为已经在画布上的)

source-over:默认。重叠部分,要绘制的在已有的图上面,其他正常显示:




source-atop:要绘制的部分和画布上已有的图重叠显示要画的,其余显示已有的,要画的不显示




source-in:要绘制的和画布上已有的图重叠,只显示重叠部分,要画的在上面。


source-out:要绘制的和画布上已有的图重叠,只绘制和要绘制图和已有图不重叠的部分,其余透明。




destination-over:展示所有的图,重叠部分展示画布上已有的。


destination-atop:两者都重叠的地方显示已经绘制在画布上的,如果将画的大,则未重叠部分显示即将画的。


destination-in:两者重叠只显示重叠部分的已经绘制在画布上的图。即将画的不显示。


destination-out:两者重叠,重叠部分不显示,未重叠的显示已经绘制在画布上的图。


lighter:显示两者的混合之后的图。颜色叠加。




copy:显示源图,忽略已经画在画布上的。


xor: 异或两个图形。重叠部分不显示。




以上就是canvas关于变换的api,要提出的一点是,如果使用css给canvas设定大小,则会放大或缩小canvas,导致内容模糊,所以给canvas设定大小的时候要用一下方法:

<canvas id="trascanvas" width="800" height="400"></canvas>



文中所有的demo请点击查看。

也可以在github上找到源码: https://github.com/jiajiakitten/canvasdemo









内容原创,转载请注明出处:

作者:Jess_喵

来源:http://www.cnblogs.com/zhangwenjiajessy/p/6160271.html

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台