如何使用 HTML5 的 Canvas 绘制一个矩形？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>Canvas 绘制矩形</title>
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

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

  // 设置矩形填充颜色
  ctx.fillStyle = "lightblue";

  // 绘制填充矩形，参数为 x, y, width, height
  ctx.fillRect(10, 10, 180, 80);

  // 设置矩形边框颜色
  ctx.strokeStyle = "blue";
    
  //设置矩形边框宽度
  ctx.lineWidth = 2;

  // 绘制矩形边框，参数为 x, y, width, height
  ctx.strokeRect(10, 10, 180, 80);


</script>

</body>
</html>

本题详细解读

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

获取 Canvas 元素：
- 通过 document.getElementById() 或其他 DOM 选择器获取 <canvas> 元素。
- HTML中需要设置canvas标签的id，width 和 height属性，style属性可以设置边框等样式。
获取 2D 渲染上下文：
- 使用 canvas.getContext("2d") 方法获取 2D 渲染上下文对象（ctx）。这个上下文对象提供了各种绘图方法。
设置样式（可选）：
- 可以使用 ctx.fillStyle 设置填充颜色，例如 ctx.fillStyle = "red" 设置填充色为红色。
- 可以使用 ctx.strokeStyle 设置描边颜色，例如 ctx.strokeStyle = "blue" 设置描边色为蓝色。
- 可以使用ctx.lineWidth 设置边框线宽，例如 ctx.lineWidth = 2设置边框线宽为2像素。
绘制矩形：
- 使用 ctx.fillRect(x, y, width, height) 绘制填充矩形。
  - x 和 y 是矩形左上角的坐标。
  - width 和 height 是矩形的宽度和高度。
- 使用ctx.strokeRect(x,y,width,height)绘制矩形边框。
  - x 和 y 是矩形左上角的坐标。
  - width 和 height 是矩形的宽度和高度。
代码解释:
- 代码中先通过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元素中看到一个浅蓝色填充，蓝色描边的矩形。
其他注意事项:

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