四、路径 Paths
4.1路径 Path
在HTML5画布上绘制路径，可以通过连接多个子路径（曲线）实现。每个子路径的结束点成为新的路径的上下文点。我们可以使用lineTo()、arcTo()、quadraticCurveTo()和bezierCurveTo()方法来绘制每个子路径。每次开始绘制一个新的路径时，也可以使用beginPath()方法。
<!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');
context.beginPath();
context.moveTo(100, 20);
// line 1
context.lineTo(200, 160);
// quadratic curve
context.quadraticCurveTo(230, 200, 250, 120);
// bezier curve
context.bezierCurveTo(290, -40, 300, 200, 400, 150);
// line 2
context.lineTo(500, 90);
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
</script>
</body>
</html>
以上代码演示了通过调用不同的曲线绘制方法，绘制路径。
4.2连接线 Line Join
若要设置HTML5画布路径的连接线样式，可以设置lineJoin上下文属性。路径有三种连接样式：miter、round和bevel。除非另有声明，否则HTML5画布连接线默认为斜接样式。
注意：如果你的线条相当薄，不以陡峭的角度连接，那么很难区分不同的线条连接。
<!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>
以上代码演示了在画布上绘制三种连接线样式。
4.3圆角 Rounded Corners
使用HTML5的canvas绘制圆角，可以调用arcTo()方法，通过定义一个控制点，一个结束点，和半径绘制一个圆弧，在圆弧的两端绘制两条直线。
<!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');
var rectWidth = 200;
var rectHeight = 100;
var rectX = 189;
var rectY = 50;
var cornerRadius = 50;
context.beginPath();
context.moveTo(rectX, rectY);
context.lineTo(rectX + rectWidth - cornerRadius, rectY);
context.arcTo(rectX + rectWidth, rectY, rectX +
rectWidth, rectY + cornerRadius, cornerRadius);
context.lineTo(rectX + rectWidth, rectY + rectHeight);
context.lineWidth = 5;
context.stroke();
</script>
</body>
</html>
以上代码演示了在画布上绘制圆角。