html5 canvas 在图片上画直线

下面为您详细介绍在 HTML5 Canvas 上的图片上画直线的操作。

与以往拉伸图像、使用怪异的 CSS 和 DOM 对象以及其他复杂的实现形式相比，利用基本的 HTML 技术在任意两点间绘制一条线段已经是显著的进步。尽管一条简单的线段看似难以想象能构成最新最美的图画，但我们可以就此忘掉那些复杂怪异的做法。

在 Canvas 中，所有操作均通过上下文对象完成。在后续的 Canvas 编程里同样如此，因为所有涉及视觉输出效果的功能，都只能通过上下文对象而非画布对象来使用。这种设计赋予了 Canvas 良好的可扩展性，基于从中抽象出的上下文类型，Canvas 未来能够支持多种绘制模型。虽然我们常提及对 Canvas 进行操作，但实际上操作的是画布所提供的上下文对象。

如同前面示例所示，对上下文的许多操作不会立即在页面上呈现效果。例如 beginPath、moveTo 以及 lineTo 这些函数，并不会直接修改 Canvas 的展示结果。Canvas 中很多用于设置样式和外观的函数同样如此。只有当对路径应用绘制（stroke）或填充（fill）方法时，结果才会显示出来。否则，只有在显示图像、显示文本或者绘制、填充和清除矩形框时，Canvas 才会立即更新。

以下是在 Canvas 上绘制直线的示例代码：

function load() {
// 获取 Canvas 元素
const canvas = document.getElementById("cv");
// 获取 2D 上下文对象
const ctx = canvas.getContext("2d");
// 开始一个新路径
ctx.beginPath();
// 将笔触移动到指定点
ctx.moveTo(70, 140);
// 从当前点绘制一条直线到指定点
ctx.lineTo(140, 70);
// 绘制当前路径
ctx.stroke();
};

通过上述代码，我们可以在指定的 Canvas 元素上绘制一条直线。首先获取 Canvas 元素，接着获取其 2D 上下文对象，然后使用 beginPath 开始一个新路径，moveTo 移动笔触到起始点，lineTo 绘制直线到终点，最后使用 stroke 方法将路径绘制出来。