HTML Canvas fillrect() 方法

在 web 前端开发中，HTML5 提供了一个非常强大的绘图功能，即 Canvas。Canvas 元素允许我们使用 JavaScript 在网页上绘制图形、动画等内容。其中，fillrect() 方法是 Canvas 中的一个常用方法，用于绘制填充矩形。

fillrect() 方法的语法

fillrect() 方法用于在 Canvas 上绘制一个填充矩形，其语法如下：

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

• x：矩形左上角的 x 坐标
• y：矩形左上角的 y 坐标
• width：矩形的宽度
• height：矩形的高度

fillrect() 方法的示例

下面是一个简单的示例，演示如何使用 fillrect() 方法在 Canvas 上绘制一个填充矩形：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>Canvas fillrect() 方法示例</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="100"></canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    
    context.fillStyle = 'red'; // 设置填充颜色为红色
    context.fillRect(50, 20, 100, 50); // 绘制一个红色填充矩形
  </script>
</body>
</html>

在上面的示例中，我们首先获取了 Canvas 元素和其上下文对象，然后设置了填充颜色为红色，并使用 fillrect() 方法绘制了一个红色填充矩形。

fillrect() 方法的注意事项

在使用 fillrect() 方法时，需要注意以下几点：

1. fillrect() 方法绘制的矩形是实心的，会覆盖掉原有内容。
2. 可通过设置 context.fillStyle 属性来改变填充颜色。
3. 可通过设置 context.globalAlpha 属性来改变填充透明度。

总结

在本文中，我们介绍了 HTML Canvas 中的 fillrect() 方法，该方法用于绘制填充矩形。通过实例演示和注意事项，希望读者能够更好地掌握 fillrect() 方法的使用。如果有任何疑问或建议，欢迎留言讨论。