**章节**
[TOC]
## 1. 色彩样式
canvas提供了两个色彩属性
设置图形的填充颜色。
```
fillStyle = color
```
设置图形轮廓的颜色。
```
strokeStyle = color
```
color 可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象。后面我们会详细渐变和图案对象。默认情况下,线条和填充颜色都是黑色(CSS 颜色值 `#000000`)。
注意: 一旦您设置了 `strokeStyle` 或者 `fillStyle` 的值,那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色,你需要重新设置 `fillStyle` 或 `strokeStyle` 的值。
实例:canvas-demo/fillStyle.html:
```
<canvas id="canvas" width="400" height="300">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
for (var i=1;i<6;i++){
for (var j=1;j<6;j++){
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
</script>
```
![](https://box.kancloud.cn/4bc040bd3b716448bad94864b257ca57_146x147.png)
## 2. 透明度
`globalAlpha`属性用来设置图形和图片透明度的属性。 数值的范围从 0.0 (完全透明)到1.0 (完全不透明)。
实例:canvas-demo/globalAlpha:
```
<canvas id="canvas" width="400" height="300">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx = canvas.getContext('2d');
ctx.fillRect(10,10, 50,50);
ctx.globalAlpha = 0.5;
ctx.fillRect(80,80, 50,50);
</script>
```
## 3. 线型的样式
**3.1 设置线条宽度**
```
lineWidth = value
```
实例:canvas-demo/lineWidth.html:
```
<canvas id="canvas" width="600" height="400">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
ctx.strokeStyle="#e78170";
for (var i = 0; i < 10; i++){
ctx.lineWidth = 1+i;
ctx.beginPath();
ctx.moveTo(25+i*14,25);
ctx.lineTo(25+i*14,140);
ctx.stroke();
}
</script>
```
**3.2 设置线条末端样式**
```
lineCap = type
```
有三个值:
- butt 线段末端以方形结束。
- round 线段末端以圆形结束。
- square 线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域。
实例:canvas-demo/lineCap.html:
```
<canvas id="canvas" width="600" height="400">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
ctx.lineCap ='butt';
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(110,10);
ctx.lineTo(210,10);
ctx.stroke();
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(110,70);
ctx.lineTo(210,70);
ctx.stroke();
ctx.lineCap = 'square';
ctx.beginPath();
ctx.moveTo(110,140);
ctx.lineTo(210,140);
ctx.stroke();
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(110, 0);
ctx.lineTo(110, 150);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(210, 0);
ctx.lineTo(210, 150);
ctx.stroke();
</script>
```
**3.3 设定线条与线条间接合处的样式**
```
lineJoin = type
```
此属性有3个值: round, bevel and miter。默认值是 miter。
- round 通过填充一个额外的,圆心在相连部分末端的扇形,绘制拐角的形状。 圆角的半径是线段的宽度。
- bevel 在相连部分的末端填充一个额外的以三角形为底的区域, 每个部分都有各自独立的矩形拐角。
- miter 通过延伸相连部分的外边缘,使其相交于一点,形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果 .
实例:canvas-demo/lineJoni.html:
```
<canvas id="canvas" width="600" height="400">
不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = '';
ctx = canvas.getContext('2d');
ctx.lineJoin ='round';
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(110,10);
ctx.lineTo(210,10);
ctx.lineTo(210, 40);
ctx.stroke();
ctx.lineJoin = 'bevel';
ctx.beginPath();
ctx.moveTo(110,70);
ctx.lineTo(210,70);
ctx.lineTo(210, 100);
ctx.stroke();
ctx.lineJoin = 'miter';
ctx.beginPath();
ctx.moveTo(110,140);
ctx.lineTo(210,140);
ctx.lineTo(210, 170);
ctx.stroke();
</script>
```
注意:如果2个相连部分在同一方向,那么lineJoin不会产生任何效果,因为在那种情况下不会出现连接区域。
**(1) miterLimit**
限制当两条线相交时交接处最大长度;所谓交接处长度(斜接长度)是指线条交接处内角顶点到外角顶点的长度。
```
miterLimit = value
```
**(3) setLineDash()**
设置虚线。
```
setLineDash(segments)
```
- segments:一个Array数组。一组描述交替绘制线段和间距(坐标空间单位)长度的数字。 如果数组元素的数量是奇数, 数组的元素会被复制并重复。例如, [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。
**(3) lineDashOffset**
设置虚线样式的起始偏移量。
```
lineDashOffset = value
```
**(4) getLineDash()**
返回一个包含当前虚线样式,长度为非负偶数的数组。
```
getLineDash()
```
## 4. 渐变Gradients
我们还可以用线性或者径向的渐变来填充或描边
**线性渐变**
```
createLinearGradient(x1, y1, x2, y2)
```
`createLinearGradient` 方法接受 4 个参数,表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
**径向渐变**
```
createRadialGradient(x1, y1, r1, x2, y2, r2)
```
`createRadialGradient` 方法接受 6 个参数,前三个定义一个以 (x1,y1) 为原点,半径为 r1 的圆,后三个参数则定义另一个以 (x2,y2) 为原点,半径为 r2 的圆。
创建出` canvasGradient `对象后,我们就可以用 `addColorStop` 方法给它上色了。
```
gradient.addColorStop(position, color)
```
`addColorStop` 方法接受 2 个参数,position 参数必须是一个 0.0 与 1.0 之间的数值,表示渐变中颜色所在的相对位置。例如,0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值(如 #FFF, rgba(0,0,0,1),等等)。
```
var linearGradient=cxt.createLinearGradient(50,50,250,250);
linearGradient.addColorStop(0,'yellow');
linearGradient.addColorStop(.5,'red');
linearGradient.addColorStop(1,'green');
cxt.fillStyle=linearGradient;
cxt.fillRect(50,50,200,200);
```
![](https://box.kancloud.cn/8809a1acc311f7d9fab88a5318156a80_313x249.png)
从上图看,(50,50)是渐变的起点,(250,250)是渐变的终点,而连接这两点的白线,就是渐变的方向。
**同心渐变**
```
var rr=cxt.createRadialGradient(100,100,40,100,100,100);
rr.addColorStop(0,'red');
rr.addColorStop(.5,'yellow');
rr.addColorStop(1,'blue');
cxt.fillStyle=rr;
cxt.fillRect(20,20,160,160);
cxt.fill();
```
![](https://box.kancloud.cn/afc68ad472da018cc3d69b12d1c3d38c_171x175.jpg)
不同心但外圆包含内圆
```
var rr2=cxt.createRadialGradient(250,250,20,260,260,50);
rr2.addColorStop(0,'red');
rr2.addColorStop(.5,'yellow');
rr2.addColorStop(1,'blue');
cxt.fillStyle=rr2;
cxt.fillRect(50,50,400,400);
cxt.fill();
```
![](https://box.kancloud.cn/e73e218b877038142e75a7347e3fc7bc_173x164.jpg)
不同心,外圆内圆分离
```
var rr3=cxt.createRadialGradient(250,250,30,350,250,50);
rr3.addColorStop(0,'red');
rr3.addColorStop(.8,'yellow');
rr3.addColorStop(1,'blue');
cxt.fillStyle=rr3;
cxt.fillRect(100,100,300,300);
```
![](https://box.kancloud.cn/339ad627ffcd3043039ef6ad8c2d22f6_333x155.jpg)
## 5. 图案样式 Patterns
createPattern(image, type) 该方法接受两个参数。Image 可以是一个 Image 对象的引用,或者另一个 canvas 对象。Type 必须是下面的字符串值之一:repeat,repeat-x,repeat-y 和 no-repeat。
例子:
```
var img=new Image();
img.src="diamond.png";
img.onload=function(){
var ptrn=cxt.createPattern(img,'repeat');
cxt.fillStyle=ptrn;
cxt.fillRect(250,250,80,80);
}
```
![](https://box.kancloud.cn/5623b90bcddcba08b4e69b92bf7df47a_113x113.png)
注意:使用 Image 对象的 onload handler 来确保设置图案之前图像已经装载完毕。
## 6. 阴影 Shadows
- shadowOffsetX = float shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,它们默认都为 0。
- shadowOffsetY = float shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,它们默认都为 0。
- shadowBlur = float shadowBlur 用于设定阴影的模糊程度,其数值并不跟像素数量挂钩,也不受变换矩阵的影响,默认为 0。
- shadowColor = color shadowColor 是标准的 CSS 颜色值,用于设定阴影颜色效果,默认是全透明的黑色。
例子:
```
var img=new Image();
img.src="mm.jpg";
img.onload=function(){
cxt.shadowOffsetX=10;
cxt.shadowOffsetY=10;
cxt.shadowBlur=8;
cxt.shadowColor="#333";
cxt.drawImage(img,10,10);
}
```
![](https://box.kancloud.cn/4a00d982db82e280b15f9a11b36a9efe_247x357.jpg)
## 7. Canvas 填充规则
当我们用到 fill(或者 clip和isPointinPath )你可以选择一个填充规则,该填充规则根据某处在路径的外面或者里面来决定该处是否被填充,这对于自己与自己路径相交或者路径被嵌套的时候是有用的。
两个可能的值: "nonzero": 默认值. "evenodd":
```
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.arc(100,100,20,0,Math.PI*2,true);
cxt.fill("evenodd");
```
![](https://box.kancloud.cn/561360435cebabed09b740f774be7159_119x122.jpg)