如何用canvas绘制矩形？canvas画矩形的两种方法介绍-

我们需要知道的是在canvas中与矩形相关的方法是rect()，使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。

rect()方法能接收 4 个参数：矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。

下面我们就来分别利用strokerect()和fillrect()方法来实现绘制矩形。

首先，我们来看看利用canvas中fillrect()方法绘制的有填充的矩形实例。

fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属性指定。

canvas画有填充矩形的效果如下：

然后我们来看一看利用canvas中strokerect()方法绘制的无填充的矩形实例。

strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定。

canvas画无填充矩形的效果如下：

最后本篇文章到这里就结束了，关于canvas更多的相关知识可以参考HTML5开发手册。

以上就是如何用canvas绘制矩形？canvas画矩形的两种方法介绍的详细内容，更多请关注 第一PHP社区 其它相关文章！