1.2.1 画直线
画直线的功能可以用 beginPath()， moveTo()， lineTo() 和 stroke() 几个方法的组合来实现。如：
<script> context.beginPath(); context.moveTo(x,y); context.lineTo(x,y); context.stroke(); </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, 150); context.lineTo(450, 50); context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
关于画直线的有关说明
方法 beginPath() 定义了一个新的路径绘制动作的开始。
方法 moveTo() 为指定点创建了一个新的子路径，这个点就变成了新的上下文点。我们可以把
moveTo() 方法看成用来定位我们的绘图鼠标用的。
方法 lineTo() 以上下文点为起点，到方法参数中指定的点之间画一条直线。
方法 stroke() 为所画的线赋予颜色，并使其可见。如果没有特别的指定颜色的话，则默认使用黑
色画直线。
1.2.2 直线的宽度
直线的宽度用lineWidth 属性设定。如：
<script>
context.lineWidth = 5; </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, 150); context.lineTo(450, 50); context.lineWidth = 15; context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
1.2.3 直线颜色
直线的颜色用 strokeStyle 属性设定。
如：
<script>
context.strokeStyle = 'blue'; </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, 150); context.lineTo(450, 50); context.lineWidth = 10;
// 设置线的颜色
context.strokeStyle = "#ff0000"; context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
1.2.4 直线端点样式
HTML5 canvas支持3种直线的端点样式，包括： butt， round， 和 square。 设定端点样式是用lineCap属性设定。缺省情况下，将使用butt样式。如：
<script>
context.lineCap = 'round'; </script>
注意：在使用 round 或 square 样式的时候，直线的长度会增加，具体增加的长度等于线的宽度。比如，一条长200px，宽10px的直线，如果使用 round 或 square 样式，由于每个端点增加了 5px，则直线的实际长度会达到210px。效果图，分别为Butt， Round 和Square
代码
<!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");
// 最上面的线是butt样式 context.beginPath();
context.moveTo(200, canvas.height / 2 - 50);
context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
context.lineWidth = 20; context.strokeStyle = "#0000ff"; context.lineCap = "butt"; context.stroke();
// 中间的线是round样式 context.beginPath();
context.moveTo(200, canvas.height / 2);
context.lineTo(canvas.width - 200, canvas.height / 2); context.lineWidth = 20; context.strokeStyle = "#0000ff"; context.lineCap = "round"; context.stroke();
// 最下面的是square样式 context.beginPath();
context.moveTo(200, canvas.height / 2 + 50);
context.lineTo(canvas.width - 200, canvas.height / 2 + 50);
context.lineWidth = 20; context.strokeStyle = "#0000ff"; context.lineCap = "square"; context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>