html5基础入门教程之canvas运用样式与颜色

在canvas绘制图形中介绍了fill和stroke方法用于填充和勾勒图形。下面总结canvas全部样式与颜色的可选项，用以绘制更吸引人的内容。

色彩

在前面介绍的canvas的相关知识中，只有用来绘制内容的方法。如果像要给绘制的内容上色，则要用到fillStyle和strokeStyle。语法如下：

fillStyle=color;
strokeStyle=color;

fillStyle用于设置填充的颜色，而strokeStyle用于设置图像轮廓的颜色。color可以是表示css颜色值的字符串、渐变对象或者图案对象。默认情况下，线条颜色和填充颜色都是黑色的。

fillStyle示例：

function draw(){
     var canvas=document.getElementById('test_fillStyle');
	 if(canvas.getContext){
	    var ctx=canvas.getContext('2d');
		for(var i=0; i<6; i++){
		   for(var j=0; j<6; j++){
		      ctx.fillStyle='rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)';
			  ctx.fillRect(25+j*25,25+i*25,25,25);
		   }
		}
	 }
  }

上面fillStyle的例子，用了双层循环来绘制并填充了6*6的方格矩阵。根据变量i和j控制每个方格绘制的位置以及填充的颜色。

strokeStyle示例：

function draw(){
     var canvas=document.getElementById('test_strokeStyle');
	 if(canvas.getContext){
	    var ctx=canvas.getContext('2d');
		for(var i=0; i<6; i++){
		   for(var j=0; j<6; j++){
		      ctx.strokeStyle='rgb(0,'+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+')';
			  ctx.beginPath();
			  ctx.arc(40+j*25,40+i*25,10,0,Math.PI*2,true);
			  ctx.stroke();
		   }
		}
	 }
  }

上面strokeStyle的例子，用了双层循环来绘制并填充了6*6的圆圈矩阵。根据变量i和j控制每个圆圈绘制的位置以及描边的颜色。

透明度

除了可以绘制实色的图形外，还可以绘制半透明的图形。通过设置globalAlpha属性或者使用一个半透明颜色来作为轮廓或者填充的样式。

1.globalAlpha

globalAlpha = transparency value

这个属性会影响canvas里所有在设置透明度后绘制的图形的透明度。它的取值区间是[0.0,1.0]。其中，0.0表示完全透明，1.0表示完全不透明。默认值是1.0。

globalAlpha属性在需要绘制大量拥有相同透明度的图形时相当高效。

globalAlpha实例：

function draw(){
     var canvas=document.getElementById('test_globalAlpha');
	 if(canvas.getContext){
	    var ctx=canvas.getContext('2d');
		ctx.fillStyle='red';
		ctx.fillRect(20,20,75,50);
		ctx.globalAlpha=0.2;
		ctx.fillStyle='blue';
		ctx.fillRect(50,50,75,50);
		ctx.fillStyle='green';
		ctx.fillRect(80,80,75,50);
	 }
  }

上面这个例子，红色的矩形是完全不透明的，因为在它之前并没有设置透明度。在红色矩形绘制完成后，设置了都明度为0.2，从而之后绘制的蓝色矩形和绿色矩形的透明度都受影响了。

2.rgba

由于strokeStyle和fillStyle都接受符合css3规范的颜色值，所以还可以使用另一种设置透明度的方法，那就是rgba()方法，它的灵活性更大。

rgba()示例：

function draw(){
     var canvas=document.getElementById('test_rgba');
	 if(canvas.getContext){
	    var ctx=canvas.getContext('2d');
		//绘制四个宽高为150*37.5的矩形，颜色分别为：黄、绿、蓝、红
		ctx.fillStyle='rgb(255,221,0)';
		ctx.fillRect(10,0,150,37.5);
		ctx.fillStyle='rgb(102,204,0)';
		ctx.fillRect(10,37.5,150,37.5);
		ctx.fillStyle='rgb(0,153,255)';
		ctx.fillRect(10,75,150,37.5);
		ctx.fillStyle='rgb(255,51,0)';
		ctx.fillRect(10,112.5,150,37.5);
		//绘制上面大矩形内部的白色小矩形
		for(var i=0;i<10;i++){
		   ctx.fillStyle='rgba(255,255,255,'+(i+1)/10+')';
		   for(var j=0;j<4;j++){
		      ctx.fillRect(15+i*14,5+j*37.5,14,27.5);
		   }
		}
	 }
  }

上面的例子，先竖向绘制了四个大小一致、颜色分别为黄、绿、蓝、红的背景矩形。然后根据变量i和j在四个矩形内部分别以一定步长来绘制背景色为白色透明度不一的白色小矩形。

线型

canvas可以通过一定属性来设置线的样式。

lineWidth = value
lineCap = type
lineJoin = type
miterLimit = value

1.lineWidth属性

lineWidth用于设置当前绘制的线的粗细。属性值必须为正数。默认值为1.0。

注意，这里的线宽是指给定路径的中心到两边的粗细。换句话说就是：在路径的两边各绘制线宽的一半。

来看一个例子：

function draw(){
     var canvas=document.getElementById('test_lineWidth1');
	 if(canvas.getContext){
	    var ctx=canvas.getContext('2d');
		ctx.lineWidth=10;
		ctx.strokeRect(20,20,80,100);
	 }
  }

由上面的例子可以看出，线宽是由起始位置向两边扩展的。

2.lineCap属性

属性lineGap设置或返回了线条末端线帽的样式。

它有三个可选值，分别为：butt，这个值是默认的，表示向线条的每个末端添加平直的边缘；round，表示向线条的每个末端添加圆形线帽；square，表示向线条的每个末端添加正方形的线帽。

lineCap示例：

function draw(){
     var canvas=document.getElementById('test_lineGap');
	 if(canvas.getContext){
	    var ctx=canvas.getContext('2d');
		var lineCap=['butt','round','square'];
		//绘制上下两条水平参考线
		ctx.strokeStyle='#09f';
		ctx.beginPath();
		ctx.moveTo(10,10);
		ctx.lineTo(140,10);
		ctx.moveTo(10,140);
		ctx.lineTo(140,140);
		ctx.stroke();
		//画线条
		ctx.strokeStyle='black';
		for(var i=0; i<lineCap.length; i++){
		   ctx.lineWidth=15;
		   ctx.lineCap=lineCap[i];
		   ctx.beginPath();
		   ctx.moveTo(25+i*50,10);
		   ctx.lineTo(25+i*50,140);
		   ctx.stroke();
		}
	 }
  }

上面的例子从左到右绘制了三条竖线，它们的起点和终点都落在了蓝色辅助线上，lineCap属性分别为butt，round，square。第一条竖线，lineCap属性是默认的butt，它的端点是与辅助线齐平的；第二条竖线的lineCap属性为round，在端点处加了半径为一般线宽的半圆；第三条竖线的lineCap属性设置为square，在端点处加了等宽且高度为一半线宽的方块。

3.lineJoin属性

当一个路径包含了线段或曲线相交的交点时，lineJoin属性说明如何绘制这些交点。只有当绘制具有等宽线条的时候，这一属性的效果才能表现出来。

它的可选值有三个，分别是：round、bevel和miter。默认值是miter。

lineJoin示例：

function draw(){
     var canvas=document.getElementById('test_lineJoin');
	 if(canvas.getContext){
	    var ctx=canvas.getContext('2d');
		var lineJoin=['round','bevel','miter'];
		ctx.lineWidth=10;
		for(var i=0; i<lineJoin.length; i++){
		   ctx.lineJoin=lineJoin[i];
		   ctx.beginPath();
		   ctx.moveTo(-5,5+i*40);
		   ctx.lineTo(35,45+i*40);
		   ctx.lineTo(75,5+i*40);
		   ctx.lineTo(115,45+i*40);
		   ctx.lineTo(155,5+i*40);
		   ctx.stroke();
		}
	 }
  }

上面的例子，第一条折线的lineJoin属性值为round，可以看出在相交处边角被磨圆了，圆的半径等于线宽；第二条折线的lineJoin属性值为bevel，定点的外边缘和一个填充的三角形相交；第三条折线的lineJoin属性为默认的miter，两条线段的外边缘一直扩展到他们相交。当两条线段以一个锐角相交，斜角连接可能变得很长。miterLimit 属性为一个斜面的长度设置了上限。超过这一限制，斜面就变成斜角了。

4.miterLimit属性

miterLimit 属性设置或返回最大斜接长度。

斜接长度指的是在两条线交汇处内角和外角之间的距离。

注意：只有当 lineJoin 属性为 “miter” 时，miterLimit 才有效。

边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用 miterLimit 属性。

如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 “bevel” 类型来显示（图解 3）：

语法：miterLimit=number;

内容层的展现是最主要的，无论背景层和贴图层有多少花哨，在设计师设计过程中，内容层对用户的展示是最优先的。

渐变

我们可以使用径向渐变或者线性渐变来填充或描边所绘制的图形。

1.线性渐变

createLinearGradient(xStart, yStart, xEnd, yEnd)

线性渐变有四个参数，其中xStart,yStart为渐变起始点的坐标；xEnd,yEnd为渐变结束点的坐标。

这个方法创建并返回了一个新的canvasGradient对象，它在指定的起始点和结束点之间线性的内插颜色值。

2.径向渐变

createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

径向渐变有六个参数，其中xStart,yStart为开始圆的圆心坐标；radiusStart为开始圆的半径；xEnd, yEnd为结束圆的圆心坐标；radiusEnd为结束圆的半径。

这个方法创建并返回一个新的CanvasGradient对象，该对象在两个指定的圆周直接放射性的插值颜色。

注意，以上两个方法都没有为渐变指定任何颜色。使用返回对象的addColorStop()来设置颜色。要使用一个渐变来勾勒线条或填充区域，只需要把CanvasGradient对象赋给strokeStyle属性或fillStyle属性即可。

3.addColorStop()方法

上面提到了，addColorStop()方法在渐变中的抹一点添加一个颜色变化。语法格式如下：

addColorStop(offset,color)

offset是一个范围在0.0到1.0之间的浮点值，表示渐变开始点和结束点直接的一部分。offset值为0对应开始点，offset值为1对应结束点。

color以一个css颜色字符串的方式，表示在指定offset显示的颜色。

createLinearGradient示例：

function draw(){
     var canvas=document.getElementById('test_createLinearGradient');
	 if(canvas.getContext){
	    var ctx=canvas.getContext('2d');
		var linergradient=ctx.createLinearGradient(0,0,0,150);
		linergradient.addColorStop(0,'#00abeb'); //起始点颜色值
		linergradient.addColorStop(0.5,'#fff'); //中间位置颜色值
		linergradient.addColorStop(0.5,'#26c000'); //中间位置颜色值
		linergradient.addColorStop(1,'#fff'); //结束点颜色值
		ctx.fillStyle=linergradient; //填充颜色
		ctx.fillRect(35,10,130,130);
	 }
  }

上面这个例子，绘制了一个130*130的正方形，并且用线性渐变填充了颜色。设置了四个点的颜色值，形成了从蓝到白又从绿到白的渐变色。

createRadialGradient示例：

function draw(){
     var canvas=document.getElementById('test_createRadialGradient');
	 if(canvas.getContext){
	    var ctx=canvas.getContext('2d');
		var radialgradient=ctx.createRadialGradient(45,45,10,52,50,30);
		radialgradient.addColorStop(0,'#a7d30c');
		radialgradient.addColorStop(0.9,'#019f62');
		radialgradient.addColorStop(1,'rgba(1,159,98,0)');
		ctx.fillStyle=radialgradient;
		ctx.fillRect(0,0,150,150);
	 }
  }

上面的例子中，在一个150*150方形上，填充了一个径向渐变。

图案

createPattern() 方法为贴图图像创建一个模式。其语法格式如下：

createPattern(image, repetitionStyle)

该方法接受两个参数，其中image为需要的图像。这个参数通常是一个Image对象，也可以使用一个canvas元素。repetitionStyle说明如何使用贴图。这个参数有四个取值，分别为：repeat，表示在各个方向上都对图像贴图；repeat-x，只在x方向上贴图；repeat-y，只在y方向上贴图；no-repeat，不贴图，只使用它一次。

creatPattern()方法创建并返回一个CanvasPattern对象，该对象表示一个贴图图像所定义的模式。要使用一个模式来勾勒线条或填充区域，可以把一个CanvasPattern对象用作strokeStyle属性或fillStyle属性。

注意，与drawImage不同，createPattern需要确认image对象已经加载完全，否则图案可能效果不对。

Firefox 目前只支持属性值repeat 。如果赋其它值，什么效果都没有的。

createPattern示例：

function draw(){
     var canvas=document.getElementById('test_createPattern');
	 if(canvas.getContext){
	    var ctx=canvas.getContext('2d');
		var img=new Image();
		img.src='http://cat7.cn/wp-content/pic/2014/0210/createlinergradient.jpg';
		img.onload=function(){
		   var pattern=ctx.createPattern(img,'repeat');
		   ctx.fillStyle=pattern;
		   ctx.fillRect(0,0,200,200);
		}
	 }
  }

这个例子创建了一个200*200的方形，并用名为createlinergradient的图片完全填充了方形。

阴影

canvas中与阴影相关的属性有四个，如下：

shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color

shadowOffsetX和shadowOffsetY用来设定阴影在x和y轴的延伸距离。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸。默认值都是0。

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

shadowBlur用于设定阴影的模糊程度，默认值为0。

shadowColor用于设定阴影颜色，值可以是标准的css颜色值，默认是全透明的黑色。

文字阴影示例：

function draw(){
     var canvas=document.getElementById('test_shadow');
	 if(canvas.getContext){
	    var ctx=canvas.getContext('2d');
		ctx.shadowOffsetX=2;
		ctx.shadowOffsetY=2;
		ctx.shadowBlur=2;
		ctx.shadowColor="rgba(0,0,0,0.5)";
		ctx.font="20px Arial"; //设置字体
		ctx.fillStyle="black";
		ctx.fillText('Sample String',5,30); //第一个参数为输出的文本，第二三个参数为在画布上的位置坐标
	 }
  }

上面的例子给文字’Sample String’设置了阴影。