canvas讲解进阶篇二

上篇我们学过过canvas的基础图形绘制，包括线段矩形以及圆弧。看上去这三个组合能完成很多东西（毕竟不是ps），但是实际canvas功能很强大的，可以实现ps中大部分功能，甚至在js控制下完成flash的东东。

这一篇我们讲解的东西不是为了让canvas多么绚丽，而是在实际中我们的画布不能那么光秃秃黑乎乎的，总要有点颜色效果吧，这叫做客户体验。哈哈

下面我们依次来说说canvas的颜色（填充透明度）、渐变、以及阴影，在这些讲解中我们不仅仅讲到效果如何实现中间也包含着一些canvas常用的必不可缺的辅助方法给大家插入式的介绍。

颜色：

canvas中的颜色应用地方很多，可以定义一条线段的颜色或者矩形的边框颜色或者圆弧的颜色或者填充时候的颜色。

实现canvas中颜色效果有两种方式fillStyle以及strokeStyle属性，这两个属性分别定义填充效果以及轮廓线效果，这些效果可以是颜色可以是渐变可以是图案等。

我们先来说颜色，canvas中的颜色是个属性，其值可以为rgb（255,255,255）或者rgba（255,255,255,0.3）或者通过颜色名称例如：yellow等来表示。当然还可以通过svg1.0规范中的颜色名称例如"goldenrod"(菊花黄)

"chocolate"(巧克力色)来作为值不过css3规范不要求浏览器支持全部svg1.0规范 所以你的浏览器可能不支持一些svg的名称。

我们来看一段代码：

context.lineJoin="round";

context.lineWidth=20;

context.fillStyle="rgba(250,100,100,0.5)";

context.strokeStyle="yellow";

context.fillRect(10,10,100,100);

context.strokeRect(50,50,100,100);

效果如下：

中间我们加入了两个属性lineJoin以及lineWidth这两个其实很简单代表所绘线条的交汇点样式以及线条粗细。我们在fillStyle中用rgba格式定义了一个透明度为0.5的有点粉红色的填充色，

然后又在strokeStyle中用颜色名yellow定义了用黄色进行描边。最后绘制了两个矩形。

渐变：

除了颜色值之外我们也可以为strokeStyle以及fillStyle属性指定渐变色或者图案，canvas元素支持线性渐变以及放射渐变，我们分别来说，先看前者：

线性渐变：

创建线性渐变我们需要引入一个新的canvas方法：createLinearGradient(x,y,x1,y1)方法，该方法接受四个参数分别是渐变起始坐标和渐变结束坐标，传入两个点之后两个点之间连线就是建立颜色渐变的效果依据，

调用该方法后会返回一个自定义的实例（例如gra）通过调用gra中的唯一方法addColorStop(stop,color)(接受两个参数：一个是位于0-1之间的duble值，另一个是domstring类型的css3颜色字符串)增加"颜色停止点"

我们来看两个效果

var gra=context.createLinearGradient(0,0,100,0);

gra.addColorStop(0,"blue");

gra.addColorStop(0.5,"rgba(250,100,100,0.6)");

gra.addColorStop(1,"chocolate");

context.fillStyle=gra;

context.lineWidth=2;

context.save();

context.strokeStyle="rgba(100,20,200,1)";

context.fillRect(10,10,100,100);

context.strokeRect(10,10,100,100);

context.restore();

var grad=context.createLinearGradient(100,100,200,200);

grad.addColorStop(0,"blue");

grad.addColorStop(0.5,"rgba(250,100,100,0.6)");

grad.addColorStop(1,"chocolate");

context.fillStyle=grad;

context.fillRect(100,100,100,100);

context.strokeRect(100,100,100,100)

效果如下：

我们分别定义了两个渐变，一个是x方向渐变，一个是对角线的渐变，用第一个举例来说定义了三种颜色的渐变，渐变范围定义到x方向的0到100像素之间，如果下面我们画的矩形显然已经超过了这个范围，

那么超过该范围怎么处理的呢？canvas的线性渐变填充范围在超过定义渐变范围后会默认使用最后一个渐变值也就是上面的"chocolate";

在这段渐变中我们发现两个陌生的方法save以及restore，这两个方法在实际canvas开发中很有用处，一般都是组合来使用，当代码执行到save时候会将当前绘图环境压入堆栈顶部，

对应的restore方法会从堆栈顶部弹出一组状态信息，并根据这组信息恢复当前绘图环境状态。上面代码中save与restore中间的部分我们为矩形框增加了带颜色的边框，

如果不用save/restore组合那么第二个矩形框也会默认使用第一个矩形框定义的样式（除非在第二个矩形框中显式定义修改其样式），我们应用了save/restore组合之后第一个矩形框会应用组合内样式，

restore之后的第二个矩形框会应用默认的边框即黑色。为了清晰期间我们用lineWidth将边框增粗易于观察区别。

放射渐变：

要实现放射渐变我们需要引进一个新的方法createRadialGradient(x0,y0,r0,x1,y1,r1),该方法实现放射渐变需要定义两个圆起始以及结束的圆，然后在两个圆之间形成的圆锥之间进行渐变操作。

六个参数分别代表两个圆的圆心以及半径。与线性渐变不同的是放射渐变填充范围仅限于圆锥之间，而不是像线性渐变似的用最后一个渐变色来填充渐变线之外的区域。

var gra=context.createRadialGradient(canvas.width/2,canvas.height,10,canvas.width/2,0,100);

gra.addColorStop(0,"blue");

gra.addColorStop(0.5,"rgba(250,100,100,0.6)");

gra.addColorStop(1,"chocolate");

context.fillStyle=gra;

context.rect(0,0,canvas.width,canvas.height);

context.fill();

实现效果如下：

图案填充：

除了颜色和渐变之外，canvas元素允许使用图案来对图形和文本进行描边或者填充，这里图案可以包括image元素，canvas元素或者video元素。

可以用createPattern()方法创建图案，该方法接受两个参数：图案本身，以及告之浏览器如何重复的字符串（repeat,repeat-x,repeat-y,no-repeat）;

用法如下：

var image=new Image();

image.src="xx.jpg";

var patten=context.createPattern(image,"repeat-x");

context.fillStyle=patten;

context.fillRect(0,0,canvas.width,canvas.height);

两种不同效果如下：

阴影：

利用阴影我们可以实现很多效果例如悬浮凹陷等，使得整个绘图能够根据具体环境显示不同视觉效果。

在canvas之中进行绘制，不管要画图形文本还是图像，都可以通过修改绘图环境中的如下四个属性来指定阴影效果：

1.shadowColor：css3格式的颜色；

2.shadowOffsetX：从图形或者文本到阴影的水平像素偏移；

3.shadowOffsetY：从图形或者文本到阴影的垂直像素偏移；

4.shadowBlur：一个与像素无关的值，该值被用于高斯模糊方程中，以便模糊化处理（后续讲解）。

如果满足以下条件，那么就能弄出来阴影效果了：

1.指定的shadowColor值不是全透明的；

2.在其余的阴影属性中存在一个非0的值。

举例我们来实现两种不同悬浮效果：  

context.shadowOffsetX = 4;  

context.shadowOffsetY = 4;

context.shadowBlur = 5;    

context.fillStyle = "red";  

context.fillRect(canvas.width/2, canvas.height/2, 30, 25);   

var string = "文字"; 

context.font = "25pt 微软雅黑";

context.fillStyle = "green";  

context.shadowColor = "rgba(0,100,100,0.5)";   

context.shadowOffsetX = -5;

context.shadowOffsetY = -5;  

context.shadowBlur = 5;  

context.fillText(string, 150, 200);  

这里定义了两个不同悬浮效果

第二个效果是文字的处理方式这里文字我们先简单介绍一下后续再继续讲解文字具体编辑。

这里我们定义文字内容后用font属性定义文字的大小字体（跟css一样）然后用fillText来向画布上绘制文字，三个参数（文字内容，开始的坐标）

效果如下：

ok，这些都是在基本绘图基础上进行的加分操作，目的是使得我们画布元素在具体环境下显示内容在视觉上合理。当然在实际应用中用途也是大大滴。在此我们先学些他们的基本应用 后续再深入理解其中一部分。

接下来我们要一起学习的是缩放剪切以及文本处理操作，继续敬请期待哦！