1.4.1 画路径
路径是由多条子路径连接构成的。每条子路径的终止点就将作为新的上下文点。我们可以使用
lineTo()， arcTo()， quadraticCurveTo() 和 bezierCurveTo() 创建新的子路径。每次要开始画一条路径的时候就要使用 beginPath() 方法。
如：
<script> context.beginPath();
</script>
效果图
代码
<!DOCTYPE HTML>
<html>
<head>
<style> body { margin: 0px; padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style> <script>
window.onload = function() {
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
context.beginPath(); context.moveTo(100, 20);
// 第一条直线
context.lineTo(200, 160);
// 二次曲线
context.quadraticCurveTo(230, 200, 250, 120);
// 贝塞尔曲线
context.bezierCurveTo(290, -40, 300, 200, 400, 150);
// 第二条直线
context.lineTo(500, 90);
context.lineWidth = 5; context.strokeStyle = "blue"; context.stroke(); };
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
关于路径的说明
1.4.2 线条的连接样式
HTML5 canvas支持3种线条的连接样式，包括： miter， round， 和 bevel。 设定连接样式是用 lineJoin 属性设定。缺省情况下，将使用 miter 样式。
如：
<script>
context.lineJoin = 'round'; </script>
注意：如果线条比较细，而且之间的连接并不形成很尖锐的角度，那么不同的连接样式之间可能会
比较难以区分。
效果图，分别为 Miter， Round 和 Bevel
代码
<!DOCTYPE HTML>
<html>
<head>
<style> body { margin: 0px; padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style> <script>
window.onload = function() {
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
// 设置线的宽度
context.lineWidth = 25;
// 最左边的是 miter 样式 context.beginPath(); context.moveTo(99, 150); context.lineTo(149, 50); context.lineTo(199, 150); context.lineJoin = "miter"; context.stroke();
// 中间的是 round 样式 context.beginPath(); context.moveTo(239, 150); context.lineTo(289, 50); context.lineTo(339, 150); context.lineJoin = "round";
context.stroke();
// 最右边的是 bevel 样式 context.beginPath(); context.moveTo(379, 150); context.lineTo(429, 50); context.lineTo(479, 150); context.lineJoin = "bevel"; context.stroke(); };
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
1.4.3 圆角画圆角使用方法 arcTo() 。此方法需要一个控制点、一个终止点和半径作为必要的参数。如：
<script>
context.arcTo(controlX,controlY,endX,endY,radius); </script>
效果图
代码
<!DOCTYPE HTML>
<html>
<head>
<style> body { margin: 0px; padding: 0px; }
#myCanvas {
border: 1px solid #9C9898;
}
</style> <script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d"); var rectWidth = 200; var rectHeight = 100; var rectX = 189; varrectY = 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>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>