html5创建三次贝塞尔曲线,[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)...

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