HTML5 Canvas Line Cap教程

转载于 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 ( ) ;           }