萌新的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做背景。这个以后再接触。

以上~