色彩 Colors
fillStyle = color设置图形的填充颜色。
strokeStyle = color设置图形轮廓的颜色。
透明度 Transparency
globalAlpha = transparency value
1 // globalAlpha 示例
2 ctx.fillStyle = '#FD0';
3 ctx.globalAlpha = 0.2;
4
5 // rgba() 示例
6 ctx.strokeStyle = "rgba(255,0,0,0.5)";
7 ctx.fillStyle = "rgba(255,0,0,0.5)";
线型 Line styles
可以通过一系列属性来设置线的样式
- lineWidth = value 设置当前绘线的粗细。属性值必须为正数。默认值是1.0
。 - lineCap = type 设置线段端点显示的样子，类型为：
butt，round和square。默认是butt。 - lineJoin = type 设置图形中两线段连接处所显示的样子。类型为：
round,bevel和miter。默认是miter。 - miterLimit = value 设置外延交点与连接点的最大距离，如果交点距离大于此值，连接效果会变成了 bevel。
渐变 Gradients
相关方法：
- createLinearGradient(x1,y1,x2,y2) 渐变的起点 (x1,y1) 与终点 (x2,y2)。
- createRadialGradient(x1,y1,r1,x2,y2,r2) 前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
- addColorStop(position, color)
position参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。（色标 color stop）
实例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4
5 </head>
6 <body onload="draw()">
7 <canvas id="tutorial" width="350" height="450" style="background:gray;"></canvas>
8
9 </body>
10 <script>
11
12 function draw() {
13 var canvas = document.getElementById('tutorial');
14 if (canvas.getContext){
15 var ctx = canvas.getContext('2d');
16
17 // Create gradients
18 var lingrad = ctx.createLinearGradient(0,0,0,150);
19 lingrad.addColorStop(0, '#00ABEB');
20 lingrad.addColorStop(0.5, '#fff');
21 lingrad.addColorStop(0.5, '#26C000');
22 lingrad.addColorStop(1, '#fff');
23
24 var lingrad2 = ctx.createLinearGradient(0,50,0,95);
25 lingrad2.addColorStop(0.5, '#000');
26 lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
27
28 // assign gradients to fill and stroke styles
29 ctx.fillStyle = lingrad;
30 ctx.strokeStyle = lingrad2;
31
32 // draw shapes
33 ctx.fillRect(10,10,130,130);
34 ctx.strokeRect(50,50,50,50);
35 }
36 }
37
38
39
40 </script>
41 </html>
42
43 function draw() {
44 var ctx = document.getElementById('canvas').getContext('2d');
45
46 // Create gradients
47 var lingrad = ctx.createLinearGradient(0,0,0,150);
48 lingrad.addColorStop(0, '#00ABEB');
49 lingrad.addColorStop(0.5, '#fff');
50 lingrad.addColorStop(0.5, '#26C000');
51 lingrad.addColorStop(1, '#fff');
52
53 var lingrad2 = ctx.createLinearGradient(0,50,0,95);
54 lingrad2.addColorStop(0.5, '#000');
55 lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
56
57 // assign gradients to fill and stroke styles
58 ctx.fillStyle = lingrad;
59 ctx.strokeStyle = lingrad2;
60
61 // draw shapes
62 ctx.fillRect(10,10,130,130);
63 ctx.strokeRect(50,50,50,50);
64
65 }
图案 Patterns
- createPattern(image,type) Image 可以是一个
Image对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y和no-repeat。
实例：
1 var img = new Image();
2 img.src = 'someimage.png';
3 var ptrn = ctx.createPattern(img,'repeat');
4 ctx.fillStyle = ptrn;
5 ctx.fillRect(0,0,150,150);
阴影 Shadows
- shadowOffsetX = float 设定阴影在 X 轴的延伸距离，默认是 0。
- shadowOffsetY = float 设定阴影在 Y 轴的延伸距离，默认是 0。
- shadowBlur = float 设定阴影的模糊程度，默认为 0。
- shadowColor = color 设定阴影颜色效果，默认是全透明的黑色。
实例：
1 function draw() {
2 var ctx = document.getElementById('canvas').getContext('2d');
3
4 ctx.shadowOffsetX = 2;
5 ctx.shadowOffsetY = 2;
6 ctx.shadowBlur = 2;
7 ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
8
9 ctx.font = "20px Times New Roman";
10 ctx.fillStyle = "Black";
11 ctx.fillText("Sample String", 5, 30);
12 }
Canvas 填充规则
- "nonzero": non-zero winding rule, 默认值.
- "evenodd": even-odd winding rule.