HTML5 在canvas中绘制矩形附效果图

一、Canvas中的矩形绘制

在Canvas中，我们拥有一个坐标系统，其原点(0,0)位于左上角。在这个坐标系统中，x坐标向右递增，y坐标向下递增。为了绘制矩形，我们可以使用Canvas提供的矩形绘制函数。

fillRect(x,y,width,height)：此函数用于绘制一个实心的矩形。

strokeRect(x,y,width,height)：此函数则会绘制一个空心的矩形，也就是矩形的边框。

clearRect(x,y,width,height)：此函数用于清除指定的矩形区域，使其完全透明。

二、HTML5 Canvas矩形绘制实例

以下是一个HTML5页面的示例，其中包含了如何使用Canvas绘制矩形的内容。

```html

您的浏览器不支持标签。

```

三、绘制效果预览

在上述HTML代码中，当页面加载完成后，`pageLoaded`函数将被调用。该函数获取canvas对象并获取其2D绘图环境，然后使用提供的函数在canvas上绘制实心矩形、空心矩形，并清除指定的矩形区域。最终的绘制效果将展示在canvas上，你可以看到实心的、空心的矩形，以及被清除的矩形区域。如果浏览器不支持canvas标签，将显示相应的提示信息。