HTML canvas rect() 方法

在 HTML5 中，Canvas 元素提供了一个非常强大的绘图 API，使得我们可以通过 JavaScript 在页面上绘制各种图形和动画。其中，rect() 方法用于绘制矩形。

rect() 方法的语法

rect() 方法的语法如下：

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

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

使用 rect() 方法绘制矩形

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

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 50, 50);
</script>

在这个示例中，我们首先获取了 Canvas 元素和绘图上下文对象，然后设置了填充样式为红色，最后使用 fillRect() 方法填充了一个矩形。

rect() 方法的注意事项

• 如果希望绘制一个空心矩形而不是填充矩形，可以使用 strokeRect() 方法。
• 在调用 rect() 方法后，需要调用 fill() 或 stroke() 方法才能将矩形绘制出来。
• 如果需要绘制多个矩形，可以多次调用 rect() 方法后再调用 fill() 或 stroke() 方法。

总结

通过本文的介绍，你已经了解了 HTML Canvas 中 rect() 方法的基本用法和注意事项。希望这篇文章能帮助你更好地使用 Canvas API 进行前端开发工作。祝你编程愉快！