Canvas lineJoin 属性【每日一段代码20】
<!DOCTYPE HMTL>
<html>
<head>
<title>lineJoin</title>
<script type="text/javascript">
function draw() {
var cxt = document.getElementById("myCanvas").getContext("2d");
var lineJoin = ['round','bevel','miter'];
cxt.lineWidth = 10;
cxt.strokeStyle="#F00";
for (i=0; i<lineJoin.length; i++){
cxt.lineJoin = lineJoin[i];
cxt.beginPath();
cxt.moveTo(-5,5+i*40);
cxt.lineTo(35,45+i*40);
cxt.lineTo(75,5+i*40);
cxt.lineTo(115,45+i*40);
cxt.lineTo(155,5+i*40);
cxt.stroke();
}
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas" height="150" width="150";"></canvas>
</body>
</html>
显示效果如下：
【lineJoin 的属性值决定了图形中两线段连接处所显示的样子。它可以是这三种之一：round, bevel 和 miter。默认是 miter。同样，绘制三条折线做例子，分别设置不同的 lineJoin 值。最上面一条是 round 的效果，边角处被磨圆了，圆的半径等于线宽一半。中间和最下面一条分别是 bevel 和 miter 的效果。当值是 miter 的时候，线段会在连接处外侧延伸直至交于一点，延伸效果受 miterLimit 属性的制约。】
