HTML DOM Canvas 对象

在网页开发中，<canvas> 是一个非常重要的 HTML 对象，用于在网页上绘制图形、动画和其他视觉效果。通过 JavaScript，我们可以使用 <canvas> 对象来绘制各种图形，添加交互功能，以及实现复杂的动画效果。

创建 <canvas> 元素

要在网页上使用 <canvas> 元素，首先需要在 HTML 文件中创建一个 <canvas> 标签，并设置宽度和高度属性，以确定画布的尺寸。

<canvas id="myCanvas" width="400" height="200"></canvas>

在上面的示例中，我们创建了一个 id 为 "myCanvas" 的 <canvas> 元素，宽度为 400px，高度为 200px。

获取 <canvas> 上下文

要在 <canvas> 上绘制图形，我们需要获取 <canvas> 的上下文对象。通过 getContext() 方法可以获取到上下文对象，通常传入 "2d" 参数表示获取 2D 绘图上下文。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

在上面的示例中，我们通过 document.getElementById() 方法获取了 id 为 "myCanvas" 的 <canvas> 元素，然后通过 getContext("2d") 方法获取了 2D 绘图上下文对象。

绘制图形

通过上下文对象 ctx，我们可以使用各种方法来绘制不同类型的图形，比如直线、矩形、圆形等。

-- -------------------- ---- -------
-- ----
------------- - ------
---------------- --- ---- -----

-- ----
----------------
------------ ---- --- -- - - ---------
------------- - -------
-----------

在上面的示例中，我们使用 fillRect() 方法绘制了一个红色的矩形，使用 arc() 方法绘制了一个蓝色的圆形。

添加交互功能

除了绘制静态图形，我们还可以通过监听鼠标事件或键盘事件，为 <canvas> 添加交互功能。

-- -------------------- ---- -------
------------------------------------ --------------- -
    ----- - - ------------- - ------------------
    ----- - - ------------- - -----------------
    
    -- ------------
    ----------------
    ---------- -- -- -- - - ---------
    ------------- - --------
    -----------
---

在上面的示例中，我们监听了鼠标移动事件，当鼠标在 <canvas> 上移动时，在鼠标位置绘制一个绿色的小圆点。

通过以上内容，你已经了解了如何在网页中使用 <canvas> 元素，并通过 JavaScript 绘制图形、添加交互功能。接下来，你可以尝试更多的绘图操作和动画效果，提升你的前端开发技能。