萌新的Canvas笔记（三）

用了图形变换的方法尝试了一个Demo之后，再来看一个图形变换的方法。

transform(a,b,c,d,e,f)

这个函数本质利用了一个图形变换矩阵，从左到右的参数依次是，水平缩放，水平倾斜，垂直倾斜，垂直缩放，水平位移，垂直位移。
使用了transform之后，会对之后要绘制的图形产生相应的变换。

setTransform(a,b,c,d,e,f)

由于transform是累计的，当使用过多的时候，会导致不知该如何变化才能达到想要的效果。使用setTransform，会忽略掉之前transform指定的变换，而从初始状态开始，设置一个全新的变换。

渐变之线性渐变

之前的fillStyle属性，不仅仅可以设置单独的颜色，否则就变成fillColor了。对于fillStyle，还可以用来设置渐变色。方法如下：

        1.创建一个渐变线，表明渐变的方向。
        2.对渐变线进行颜色设置。

代码如下：

var grd = context.createLinearGradient(0, 0, 0, 800);
            grd.addColorStop(0.0, "#fff");
            grd.addColorStop(1.0, "#000");
            context.fillStyle = grd;
            context.fillRect(0, 0, 800, 800);

效果如下：

解释： context.createLinearGradient创建一个渐变线，参数指明两个点，渐变线就为这两个点确定的线段。addColorStop为渐变线的每一部分指定颜色，第一个参数为从0.0~1.0的浮点数，可以指定多个渐变步骤。比如 0.0~0.5~1.0。

补充：

    如果画布的过大，那么后面剩余的部分的颜色，会与最后的渐变色步骤颜色一致，即与1.0位置的颜色一致。 前面也同理。
    如果过小，则只会将所在位置的颜色填充出来。忽略超过画布的部分。

渐变之径向渐变

    有了线性渐变的基础后，理解径向渐变就容易的多
    同样，径向渐变也分为两个步骤：
        1.定义两个同心圆，为渐变范围（代替渐变线）
        2.定义颜色的渐变步骤（addColorStop）

代码：

            var radialgrad = context.createRadialGradient(400, 400, 0, 400, 400, 500);
            radialgrad.addColorStop(0.0, "white");
            radialgrad.addColorStop(0.25, "yellow");
            radialgrad.addColorStop(0.5, "green");
            radialgrad.addColorStop(0.75, "blue");
            radialgrad.addColorStop(1.0, "black");
            context.fillStyle = radialgrad;
            context.fillRect(0, 0, 800, 800);

效果如下：

解释：
没什么好解释的。。跟线性渐变差不多

使用图片背景

fillStyle还允许使用图片来当做背景。道理与之前的一样，只不过这次是先创建pattern，并且设置好相关状态以后，再赋值给fillStyle。代码如下：

            var icon = new Image();
            icon.src = "icon.jpg";
            icon.onload = function (){
                var pattern = context.createPattern(icon, "no-repeat");
                context.fillStyle = pattern;
                context.fillRect(0, 0, 800, 800);
            }

其中，方式可以是no-repeat,repeat-x,repeat-y,repeat这几种。
效果：

也可以将图片改成一个canvas，也有效果。也就是说允许我们自己绘制一个图像来当做背景。

也可以使用video做背景。这个以后再接触。

以上~