canvas绘制矩形的方法,使用canvas绘制图形,下面哪个方法可以绘制矩形?

　　本文翻译自Steve Fulton Jeff Fulton HTML 5 canvas，第2章“基本矩形形状”。

　　我们来看看Canvas内置的简单几何图形——矩形绘制。在Canvas中，绘制矩形有三种方法：fillRect、StrokeRect和clearRect。当然，我们也可以用“路径”来描述包括矩形在内的所有图形。

　　以下是上述三种方法的API:

　　1.fillRect(x，y，width，height).从(x，y)开始，以宽度和高度绘制一个实心矩形。

　　2.strokeRect(x，y，width，height).从(x，y)画一个宽和高的矩形框。矩形框将根据当前设置的strokeStyle、lineWidth、lineJoin和miterLimit属性呈现为不同的样式。

　　3.clearRect(x，y，width，height).从(x，y)中清除宽度和高度为的矩形区域，使其完全透明。

　　在调用上述方法绘制画布之前，我们需要设置填充和描边的样式。设置这些样式最基本的方法是使用24位颜色(用十六进制字符串表示)。下面是一个简单的例子：复制代码代码如下：

　　context.fillStyle= # 000000

　　context . stroke style= # ff 00 ff ；

　　在下面的示例中，填充颜色设置为黑色，而描边颜色设置为紫色：复制代码如下：

　　函数drawScreen() {

　　context.fillStyle= # 000000

　　context . stroke style= # ff 00 ff ；

　　context . line width=2；

　　context.fillRect(10，10，40，40)；

　　context.strokeRect(0，0，60，60)；

　　context.clearRect(20，20，20，20)；

　　}

　　代码执行结果如下图所示：

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。