如何使用 HTML5 的 Canvas 绘制一个矩形？

推荐答案

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

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

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

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

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

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

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


---------

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

本题详细解读

使用 HTML5 的 Canvas 绘制矩形主要涉及以下几个步骤：

1. 获取 Canvas 元素：

   • 通过 document.getElementById() 或其他 DOM 选择器获取 <canvas> 元素。
   • HTML中需要设置canvas标签的id，width 和 height属性，style属性可以设置边框等样式。

2. 获取 2D 渲染上下文：

   • 使用 canvas.getContext("2d") 方法获取 2D 渲染上下文对象（ctx）。这个上下文对象提供了各种绘图方法。

3. 设置样式（可选）：

   • 可以使用 ctx.fillStyle 设置填充颜色，例如 ctx.fillStyle = "red" 设置填充色为红色。
   • 可以使用 ctx.strokeStyle 设置描边颜色，例如 ctx.strokeStyle = "blue" 设置描边色为蓝色。
   • 可以使用ctx.lineWidth 设置边框线宽，例如 ctx.lineWidth = 2设置边框线宽为2像素。

4. 绘制矩形：

   • 使用 ctx.fillRect(x, y, width, height) 绘制填充矩形。
     • x 和 y 是矩形左上角的坐标。
     • width 和 height 是矩形的宽度和高度。
   • 使用ctx.strokeRect(x,y,width,height)绘制矩形边框。
     • x 和 y 是矩形左上角的坐标。
     • width 和 height 是矩形的宽度和高度。

5. 代码解释:

   • 代码中先通过document.getElementById("myCanvas");获取id为myCanvas的canvas元素，之后通过canvas.getContext("2d")获取canvas的2d渲染上下文。
   • 设置填充色为浅蓝色，然后调用ctx.fillRect(10, 10, 180, 80)绘制一个从(10,10)坐标开始，宽度为180像素，高度为80像素的填充矩形。
   • 设置边框色为蓝色，边框宽度为2像素，然后调用ctx.strokeRect(10, 10, 180, 80)绘制一个从(10,10)坐标开始，宽度为180像素，高度为80像素的边框矩形。注意：这里的边框矩形跟填充矩形使用的坐标尺寸是相同的，是为了展示两种矩形的绘制方法。
   • 最终会在页面canvas元素中看到一个浅蓝色填充，蓝色描边的矩形。

6. 其他注意事项:

• 如果只绘制边框，不设置填充，则可以使用ctx.strokeRect()方法；如果只绘制填充，不绘制边框，则可以使用ctx.fillRect()方法。
• 也可以在绘制矩形之前使用ctx.beginPath()方法开始新的路径，并用ctx.closePath()方法关闭路径，这个方法可以控制路径绘制方式，例如设置线条连接方式等，这里矩形绘制比较简单，没有演示该方法的使用。