介绍
HTML5 Canvas 是HTML5新推出的一种绘图技术。可以使用JavaScript在网页中动态地绘制图形和图像。在HTML5之前，对于网页的绘图任务，通常使用的是标记语言SVG或者Flash技术。Canvas 是使用 JavaScript 在 HTML5 中才得以实现。
要点
使用canvas可以绘制许多基本形状，例如：线条，弧线，矩形，圆形，文本等。
本文将主要介绍如何使用HTML5的Canvas绘制直线。
步骤
- 创建canvas画布
在HTML页面中，我们需要使用Canvas标签来创建画布。canvas标签可以有宽和高属性，可以通过CSS或JS来设置。
<canvas id="myCanvas" width="200" height="100"></canvas>
- 获取上下文
在绘制任何东西之前，我们需要拿到绘图上下文，上下文基于 Canvas 对象。
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
- 绘制直线
使用beginPath()方法将画笔移动到第一个点，使用moveTo()方法将画笔移动到绘制的第一个点，使用lineTo()方法完成绘制。最后使用stroke()方法渲染出直线。
context.beginPath();
context.moveTo(10, 10);
context.lineTo(190, 90);
context.stroke();
该代码将在画布上创建一条从 (10, 10) 到 (190, 90) 的直线。
完整代码
下面是一个完整的例子：在canvas上画一条直线，并设置其线条颜色、宽度。
<!DOCTYPE html>
<html>
<head>
<title>使用 Canvas 绘制直线</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle = "red"; // 设置线条颜色为红色
context.lineWidth = 5; // 设置线条宽度为5个像素
context.moveTo(10, 10);
context.lineTo(190, 90);
context.stroke();
</script>
</body>
</html>
小结
使用Canvas可以在网页上动态和静态地绘制各种基本形状和复杂的图形。Canvas是创建图表、绘制拓扑图以及其他动画效果的最佳选择。
使用Canvas绘制直线的方法包括：创建画布、获取上下文和绘制直线。在绘制直线时，需要使用beginPath()、moveTo()、lineTo()和stroke()方法。
Canvas API包含丰富的绘图方法和属性，可以为您提供创建复杂图形的全面支持，并为您的网页提供丰富的效果。