canvas 矩形填充

要在 Canvas 上绘制一个填充的矩形，您可以使用 `fillRect()` 方法。以下是一个简单的示例：

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

<script>
  // 获取 Canvas 元素
  var canvas = document.getElementById("myCanvas");
  // 获取 Canvas 上下文
  var ctx = canvas.getContext("2d");

  // 绘制填充矩形
  ctx.fillRect(50, 50, 100, 100);
</script>

在上面的示例中，`fillRect()` 方法将会在 (50, 50) 的位置开始绘制一个宽为 100，高为 100 的填充矩形。您可以根据需要调整参数来绘制您想要的矩形。

相关问题

canvas 动态填充

要在 Canvas 中进行动态填充，可以使用 CanvasRenderingContext2D 对象的 fillStyle 属性来设置填充样式。可以使用颜色值、渐变对象或图案对象作为填充样式。

以下是使用颜色值进行动态填充的示例：

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

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

let hue = 0;

function draw() {
  // 设置填充样式为随机颜色
  ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
  
  // 填充矩形
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // 更新颜色值
  hue += 1;
  
  // 重复执行
  requestAnimationFrame(draw);
}

draw();

在上面的示例中，我们定义了一个 `draw` 函数，该函数使用 `hsl` 颜色值设置填充样式，并且每次调用时更新 `hue` 变量的值。然后，我们使用 `requestAnimationFrame` 方法来循环调用该函数，以实现动态填充的效果。

你也可以使用渐变对象或图案对象作为填充样式，这需要使用 CanvasRenderingContext2D 对象的 createLinearGradient、createRadialGradient 或 createPattern 方法来创建相应的对象。具体使用方法可以参考相关文档或示例。

小程序canvas矩形圆角

可以使用canvas的arc方法来绘制圆角矩形。具体实现步骤如下：

1. 使用canvas的beginPath方法开始绘制路径。
2. 使用canvas的moveTo方法移动到矩形的左上角位置。
3. 使用canvas的lineTo方法绘制矩形的上边线。
4. 使用canvas的arcTo方法绘制矩形的右上角圆弧。
5. 使用canvas的lineTo方法绘制矩形的右边线。
6. 使用canvas的arcTo方法绘制矩形的右下角圆弧。
7. 使用canvas的lineTo方法绘制矩形的下边线。
8. 使用canvas的arcTo方法绘制矩形的左下角圆弧。
9. 使用canvas的closePath方法关闭路径。
10. 使用canvas的fill或stroke方法填充或描边矩形。

以下是一个绘制圆角矩形的示例代码：

function drawRoundRect(ctx, x, y, width, height, radius) {
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.arcTo(x + width, y, x + width, y + radius, radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
  ctx.lineTo(x + radius, y + height);
  ctx.arcTo(x, y + height, x, y + height - radius, radius);
  ctx.lineTo(x, y + radius);
  ctx.arcTo(x, y, x + radius, y, radius);
  ctx.closePath();
  ctx.fill();
}