Canvas 绘制

HTML Canvas：基础绘图

使用 JavaScript 在 Canvas 上绘图

HTML <canvas> 元素上的所有绘图操作都使用 JavaScript 执行。canvas 本身只是一个空白的绘图表面；JavaScript 提供了工具来赋予它生命。

以下是绘制一个红色矩形的基本示例：

// 需要的 HTML: <canvas id="myCanvas" width="200" height="100"></canvas>

// JavaScript (最好放在 HTML 中的 canvas 元素之后或 DOMContentLoaded 事件监听器中)
const canvas = document.getElementById('myCanvas');

// 检查 canvas 元素和 getContext 是否支持
if (canvas && canvas.getContext) {
    const ctx = canvas.getContext('2d'); // 获取 2D 渲染上下文

    // 设置填充颜色
    ctx.fillStyle = 'red'; // 你可以使用颜色名称、十六进制代码 (#FF0000)、rgb() 等。

    // 绘制填充矩形
    // fillRect(x, y, width, height)
    ctx.fillRect(10, 10, 150, 75); // x, y, width, height
} else {
    console.error('Canvas 不支持或元素未找到。');
}

步骤 1：查找 Canvas 元素

首先，你需要获取 HTML 文档中 <canvas> 元素的引用。这通常是使用其 id 属性通过 document.getElementById() 方法来完成的。

const canvas = document.getElementById('myCanvas');

一个好的实践是确保你的脚本在浏览器加载 HTML 元素之后运行，例如，将你的 <script> 标签放在结束的 </body> 标签之前，或者使用像 DOMContentLoaded 这样的事件监听器。

步骤 2：创建绘图对象（渲染上下文）

获取 canvas 元素后，你需要获取其绘图上下文。上下文是一个对象，提供了在 canvas 上绘图所需的所有方法和属性。

最常见的上下文是 2D 渲染上下文，通过在 canvas 元素上调用 getContext('2d') 方法获得。

const ctx = canvas.getContext('2d');

建议检查 canvas.getContext 是否可用，以处理可能不支持 canvas 的浏览器（尽管现在这种情况很少见）。

步骤 3：在 Canvas 上绘图

有了渲染上下文 (ctx)，你现在就可以开始绘图了。例如，要绘制一个填充矩形：

设置填充样式（颜色、渐变或图案）：

ctx.fillStyle = '#FF0000'; // 将填充颜色设置为红色

fillStyle 属性可以是任何有效的 CSS 颜色字符串（例如，‘blue’, ‘#00FF00’, ‘rgb(0, 0, 255)’）、一个渐变对象或一个图案对象。默认的 fillStyle 是黑色 (#000000)。

使用 fillRect() 绘制填充矩形：

ctx.fillRect(x, y, width, height);

x: 矩形左上角的 x 坐标。
y: 矩形左上角的 y 坐标。
width: 矩形的宽度。
height: 矩形的高度。

示例：

ctx.fillRect(0, 0, 150, 75); // 在 canvas 的左上角绘制一个 150x75 像素的红色矩形。

这仅仅是开始！2D 上下文提供了更多用于绘制路径、线条、圆弧、文本、图像以及应用变换的方法。