HTML5 Canvas Line Cap教程

转载于 http://www.balingke.com/archives/503.html

添加一个cap外观到line上，我们使用lineCap属性。直线可以有三种cap类型的风格：butt,round,或者square。除非使用其他方法，HTML5 Canvas直线默认的是butt风格。

代码如下：

   context.lineCap=[value];

 context.lineCap=[value];

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

         window.onload = function(){

            var canvas = document.getElementById("mycanvas");

            var context = canvas.getContext("2d");

             //butt line cap(上部直线)

             context.beginPath();

             context.moveTo(200,canvas.height/2-50);

             context.lineTo(canvas.width-200,canvas.height/2-50);

             context.strokeStyle = "#ff6600";//line color

             context.lineWidth = 20;

             context.lineCap = "butt";

             context.stroke();

             //round line cap(中间直线)

             context.moveTo(200,canvas.height/2);

             context.lineTo(canvas.width-200,canvas.height/2);

             context.lineCap = "round";

             //下部直线

             context.moveTo(200,canvas.height/2+50);

             context.lineTo(canvas.width-200,canvas.height/2+50);

             context.lineWidth = 20;            

             context.strokeStyle = "#ff6600";//设置画笔颜色

             context.lineCap = "square";

         }