canvas的学习笔记 8 lineJoin
知识点：lineJoin=type
同一个path内，设定线条与线条间接合处的样式。共有3个值 round、bevel、miter
1、round通过填充一个额外，圆心在相连部分末端的扇形，绘制拐角的形状，圆角的半径是线段的宽度
2、bevel在相连部分的末端填充一个额外的以三角形为底的区域。每个部分都有各自独立的矩形拐角
3、miter（默认）通过延伸相连部分的外边缘，使其相交与一点，形成一个额外的菱形区域
具体的demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
canvas{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="tutorial" width="300px" height="350px"></canvas>
</body>
<!-- 知识点：同一个path内，设定线条与线条间接合处的样式 -->
<!-- 共有3个值round、bevel、miter: -->
<!-- 1、round通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角形状。圆角的半径是线段的宽度 -->
<!-- 2、bevel在相连部分的末端填充一个额外的以三角形为底的区域。每个部分都有各自独立的矩形拐角 -->
<script type="text/javascript">
function draw(){
var canvas = document.getElementById("tutorial")
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d")
var lineJoin=["round","bevel","miter"];
ctx.lineWidth=20;
for(var i =0 ;i<3;i++){
ctx.lineJoin=lineJoin[i]
ctx.beginPath();
ctx.moveTo(50,50+50*i);
ctx.lineTo(100,100+i*50);
ctx.lineTo(150,50+i*50);
ctx.lineTo(200,100+i*50);
ctx.lineTo(250,50+i*50);
ctx.stroke()
}
}
draw()
</script>
</html>
