View Code

1 function draw5(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) ; context = canvas.getContext("2d"); context.fillStyle = "#EEEEFF"; 10 context.fillRect(0, 0, 400, 300); 11 12 context.fillStyle = "rgba(255,0,0,0.1)"; context.translate(100, 100); 15 context.scale(0.5, 0.5); 16 context.rotate(Math.PI / 4); 17 context.fillRect(0, 0, 100, 100); context.restore(); context.save(); context.fillStyle = "rgba(255,0,0,0.2)"; context.translate(100, 100); 25 context.rotate(Math.PI / 4); 26 context.scale(0.5, 0.5); 27 context.fillRect(0, 0, 100, 100); context.save(); context.fillStyle = "rgba(255,0,0,0.3)"; context.scale(0.5, 0.5); 34 context.translate(100, 100); 35 context.rotate(Math.PI / 4); 36 context.fillRect(0, 0, 100, 100); context.save(); context.fillStyle = "rgba(255,0,0,0.4)"; context.scale(0.5, 0.5); 43 context.rotate(Math.PI / 4); 44 context.translate(100, 100); 45 context.fillRect(0, 0, 100, 100); context.save(); context.fillStyle = "rgba(255,0,0,0.5)"; context.rotate(Math.PI / 4); 52 context.translate(100, 100); 53 context.scale(0.5, 0.5); 54 context.fillRect(0, 0, 100, 100); context.save(); context.fillStyle = "rgba(255,0,0,1)"; context.rotate(Math.PI / 4); 61 context.scale(0.5, 0.5); 62 context.translate(100, 100); 63 context.fillRect(0, 0, 100, 100); }

由于（平移，缩放，旋转）和（平移，旋转，缩放）一样

     （缩放，选装，平移）和（旋转，缩放，平移）一样

所以实验结果只能看到“4”中情况，其实是有两种情况被覆盖了

下面给出平移，缩放，旋转先后顺序不同，坐标轴的变化图

矩阵变换 context.transform(m11,m12,m21,m22,dx,dy)

    所谓的矩阵变换其实是context内实现平移，缩放，旋转的一种机制

    他的主要原理就是矩阵相乘

    额，要讲解这个可以另开一个篇幅，庆幸的是已经有人做了总结，可以参考下面这篇文章

    我们需要了解的是

    context.translate(x,y) 等同于context.transform (1,0,0,1,x,y)或context.transform(0,1,1,0.x,y)

    context.scale(x,y)等同于context.transform(x,0,0,y,0,0)或context.transform (0,y,x,0, 0,0);

    context.rotate(θ)等同于  

    context.transform(Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180),

    -Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)，0，0）

    或

    context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)，

    Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180), 0，0）

图形组合 context.globalCompositeOperation=type

    图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢，还是相互重叠的部分不显示等等，至于怎么显示就取决于type的值了

    type：

        source-over（默认值）:在原有图形上绘制新图形

        destination-over:在原有图形下绘制新图形

        source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色

        destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色

        source-out:只显示新图形非交集部分

        destination-out:只显示原有图形非交集部分

        source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色

        destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色

        lighter:原有图形和新图形都显示，交集部分做颜色叠加

        xor:重叠飞部分不现实

        copy:只显示新图形

    文字看得人眼花缭乱，特意画图一张：回头一看惊觉打错字，图片的原型为圆形，你懂的- -

以下为实验代码