lineWidth: 设置线条的宽度,值是一个数值,如lineWidth = 5.
画3条不同宽度的线条:
1
2 body {
3 background: #000;
4 }
5 #canvas {
6 background: white;
7 }
8
9
10 window.onload = function () {
11 var oCanvas = document.querySelector("#canvas"),
12 oGc = oCanvas.getContext('2d');
13
14 oGc.beginPath();
15 oGc.lineWidth = 5;
16 oGc.strokeStyle = 'red';
17 oGc.moveTo( 200, 100 );
18 oGc.lineTo( 600, 100 );
19 oGc.stroke();
20
21 oGc.beginPath();
22 oGc.lineWidth = 10;
23 oGc.strokeStyle = 'orange';
24 oGc.moveTo( 200, 300 );
25 oGc.lineTo( 600, 300 );
26 oGc.stroke();
27
28 oGc.beginPath();
29 oGc.lineWidth = 20;
30 oGc.strokeStyle = '#09f';
31 oGc.moveTo( 200, 500 );
32 oGc.lineTo( 600, 500 );
33 oGc.stroke();
34 }
35
36
37
38
39
lineWidth设置弧形的宽度:
1
2 body {
3 background: #000;
4 }
5 #canvas {
6 background: white;
7 }
8
9
10 window.onload = function () {
11 var oCanvas = document.querySelector("#canvas"),
12 oGc = oCanvas.getContext('2d');
13
14 oGc.lineWidth = 10;
15 oGc.arc( 300, 300, 200, 0, 270 * Math.PI / 180, false );
16 oGc.stroke();
17 }
18
19
20
21
22
这段圆弧设置了lineWidth, 那么他的半径就等于lineWidth + 原来的半径
lineCap设置线条开始与结尾的线帽样式,有3个值
1,butt: 这是默认值,不加任何样式
2,round: 圆形
3,square: 正方形
1
2 body {
3 background: #000;
4 }
5 #canvas {
6 background: white;
7 }
8
9
10 window.onload = function () {
11 var oCanvas = document.querySelector("#canvas"),
12 oGc = oCanvas.getContext('2d');
13
14 oGc.lineWidth = 100;
15 oGc.beginPath();
16 oGc.strokeStyle = 'red';
17 oGc.lineCap = 'butt';
18 oGc.moveTo( 200, 100 );
19 oGc.lineTo( 600, 100 );
20 oGc.stroke();
21
22 oGc.beginPath();
23 oGc.strokeStyle = 'orange';
24 oGc.lineCap = 'round';
25 oGc.moveTo( 200, 300 );
26 oGc.lineTo( 600, 300 );
27 oGc.stroke();
28
29 oGc.beginPath();
30 oGc.strokeStyle = '#09f';
31 oGc.lineCap = 'square';
32 oGc.moveTo( 200, 500 );
33 oGc.lineTo( 600, 500 );
34 oGc.stroke();
35
36 oGc.beginPath();
37 oGc.lineWidth = 1;
38 oGc.strokeStyle = '#ccc';
39 oGc.moveTo( 200, 0 );
40 oGc.lineTo( 200, oCanvas.height );
41 oGc.stroke();
42
43 oGc.beginPath();
44 oGc.moveTo( 150, 0 );
45 oGc.lineTo( 150, oCanvas.height );
46 oGc.stroke();
47 }
48
49
50
51
52
如果设置了线帽的样式( square, round ),线条就会加长,长出了多少?我在图中作了两条参考线,线条两边多出来的长度是线宽的一半。着这里就是 50,就是lineWidth=100的一半.
利用 lineWidth和lineCap属性写一个字母Z
1
2 body {
3 background: #000;
4 }
5 #canvas {
6 background: white;
7 }
8
9
10 window.onload = function () {
11 var oCanvas = document.querySelector("#canvas"),
12 oGc = oCanvas.getContext('2d');
13
14 oGc.lineWidth = 30;
15 oGc.lineCap = 'round';
16 oGc.moveTo( 100, 100 );
17 oGc.lineTo( 300, 100 );
18 oGc.lineTo( 100, 300 );
19 oGc.lineTo( 300, 300 );
20 oGc.stroke();
21 }
22
23
24
25
26
你会发现,只有两个地方有lineCap样式,线的开始点和结束点。线条的连接处并没有加上lineCap样式
canvas为我们提供了lineJoin方法,可以设置线的连接处的样式,有3个值:
miter: 默认值,尖角
round: 圆角
bevel: 斜角
1 oGc.lineWidth = 30;
2 oGc.lineCap = 'round';
3 oGc.lineJoin = 'round';
4 oGc.moveTo( 100, 100 );
5 oGc.lineTo( 300, 100 );
6 oGc.lineTo( 100, 300 );
7 oGc.lineTo( 300, 300 );
8 oGc.stroke();
加上lineJoin = 'round' 就会变成圆角效果:
miter效果:
bevel效果
画虚线:
我们之前用moveTo, lineTo画的都是实线,canvas为我们提供了setLineDash()方法,它可以用来画虚线:
用法:
cxt.setLineDash( 数组 )
参数中这个数组,是由实线和空白组合合成,如:
[ 20, 5 ]: 20px 实线,5px空白
[ 20, 5, 10, 5]: 20px实线,5px空白, 10px实线, 5px空白
重复拼凑组合而成的线型.
1
2 body {
3 background: #000;
4 }
5 #canvas {
6 background: white;
7 }
8
9
10 window.onload = function () {
11 var oCanvas = document.querySelector("#canvas"),
12 oGc = oCanvas.getContext('2d');
13
14 oGc.lineWidth = 5;
15 oGc.strokeStyle = '#09f';
16 oGc.beginPath();
17 oGc.setLineDash( [ 10, 5 ] );
18 oGc.moveTo( 100, 100 );
19 oGc.lineTo( 600, 100 );
20 oGc.stroke();
21
22 oGc.beginPath();
23 oGc.setLineDash( [ 20, 5, 10, 5 ] );
24 oGc.moveTo( 100, 150 );
25 oGc.lineTo( 600, 150 );
26 oGc.stroke();
27
28 oGc.beginPath();
29 oGc.setLineDash( [ 40, 5, 20, 5, 10, 1 ] );
30 oGc.moveTo( 100, 200 );
31 oGc.lineTo( 600, 200 );
32 oGc.stroke();
33 }
34
35
36
37
38
来源:https://www.cnblogs.com/ghostwu/p/7597936.html