HTML | canvas rect() 方法

概述

rect() 方法是 canvas 绘图 API 中的一个方法，用于绘制矩形。这个方法可以接收 4 个参数：x、y、width 和 height，分别表示矩形的左上角坐标和宽高。

语法如下：

context.rect(x, y, width, height);

参数

• x: 矩形左上角的 x 坐标。默认值为 0。
• y: 矩形左上角的 y 坐标。默认值为 0。
• width: 矩形的宽度。默认值为 canvas 的宽度。
• height: 矩形的高度。默认值为 canvas 的高度。

示例

以下是一个简单的例子，演示了如何使用 rect() 方法在 canvas 上绘制一个矩形。

<canvas id="myCanvas"></canvas>

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

  // 绘制矩形
  context.rect(50, 50, 150, 100);

  // 设置样式并填充矩形
  context.fillStyle = 'red';
  context.fill();
</script>

运行上面的代码，可以在 canvas 上看到一个红色的矩形。

结论

rect() 方法是一个基本的绘图方法，用于在 canvas 上绘制矩形。它的参数很简单，通过设置不同的参数值可以绘制出各种不同形状的矩形。因为矩形在视觉上是一种非常基本的形状，所以 rect() 方法在 canvas 绘图中被广泛使用。