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

HTML5 Canvas Line Cap Tutorial

添加一个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. beginPath ( ) ;
             context. moveTo ( 200 ,canvas. height / 2 ) ;
             context. lineTo (canvas. width - 200 ,canvas. height / 2 ) ;
             context. lineWidth = 20 ;
             context. strokeStyle = "#ff6600" ; //line color
             context. lineCap = "round" ;
             context. stroke ( ) ;
              //下部直线
             context. beginPath ( ) ;
             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" ;
             context. stroke ( ) ;
          }