要设置HTML5 Canvas路径的行连接样式，我们可以设置lineJoin context属性。 路径可以具有三个线连接之一：斜接，圆形或斜角。 除非另有说明，否则HTML5 Canvas行连接属性将默认使用斜接样式。
注意：如果您的线条很薄并且没有以陡峭的角度连接，则可能难以区分不同的线连接。
html代码：
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// set line width for all lines
context.lineWidth = 25;
// miter line join (left)
context.beginPath();
context.moveTo(99, 150);
context.lineTo(149, 50);
context.lineTo(199, 150);
context.lineJoin = 'miter';
context.stroke();
// round line join (middle)
context.beginPath();
context.moveTo(239, 150);
context.lineTo(289, 50);
context.lineTo(339, 150);
context.lineJoin = 'round';
context.stroke();
// bevel line join (right)
context.beginPath();
context.moveTo(379, 150);
context.lineTo(429, 50);
context.lineTo(479, 150);
context.lineJoin = 'bevel';
context.stroke();
</script>
</body>
</html>
1230博客
热门推荐：