HTML 参考手册 目录

HTML canvas rect() 方法

HTML Canvas rect() 方法

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

rect() 方法的语法

rect() 方法的语法如下:

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

使用 rect() 方法绘制矩形

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

------- ------------- ----------- ----------------------
--------
    --- ------ - ------------------------------------
    --- --- - ------------------------
    
    ------------- - ------
    ---------------- --- --- ----
---------

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

rect() 方法的注意事项

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

总结

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


下一篇:HTML 标签列表(字母排序)