Canvas绘制矩形入门

Canvas是HTML5新增的元素，可用于绘制图形。下面介绍如何利用该标签来绘制一个矩形，展示其基本绘图功能。

1、 创建一个HTML文件，所示。

2、 在HTML文件的body标签内插入一个canvas元素，为其设置id为canvas，并指定宽度和高度属性，具体样式可参考示意图。

3、 代码：

4、 为提升视觉效果，我们在title标签后添加style标签，对canvas进行样式设置，从而优化显示效果。

5、 样式代码重写

6、 配置编码

7、 设定矩形距离画布边缘的位置，以及其宽度、高度和背景色。通过fillRect(x, y, width, height)定义矩形的位置与尺寸，利用fillStyle属性指定填充颜色，最终呈现效果所示。

8、 配置编码参数

9、 保存HTML文件后，用浏览器打开即可查看效果，一个矩形便会呈现出来，所示。

10、 将全部代码复制到HTML文件中，保存后直接运行即可查看效果。

11、 全部代码

12、 }

13、 }