我们对矩形是有一定了解的，那么要在画布上绘制出一个矩形该怎么实现呢？可以使用坐标来定义矩形的摆放位置，再定义矩形的宽度和高度。其中矩形坐标是指矩形的左上角坐标，例如矩形左上角坐标x为50，y为50。矩形的宽度和高度是指绘制矩形的宽度和高度尺寸，例如矩形宽度为200，高为100。
掌握了矩形的基本概念后，接下来，我们讲解矩形的绘制方法，Canvas提供了strokeRect()方法可直接绘制矩形，该方法中的参数为矩形的左上角xy坐标和矩形的宽度和高度。而fillRect()方法则用于绘制填充了颜色的矩形，其参数与strokeRect()方法相同。
以下是一个网页示例，演示了如何在Canvas上绘制矩形。
示例效果与源代码：
123456789101112131415161718192021222324252627282930313233
尝试一下 »
首先，你需要在HTML文档中添加一个
接下来，在JavaScript中，可以使用Canvas API来绘制矩形。Canvas的绘图上下文（context）是绘图操作的核心，通过它可以调用各种绘图方法。对于矩形，最常用的方法是fillRect()（填充矩形）和strokeRect()（绘制矩形边框）。
总结
通过以上步骤，你就可以在Canvas上绘制矩形了。首先是创建Canvas元素并指定其大小，然后使用JavaScript和Canvas API来绘制矩形。你可以通过修改fillRect()和strokeRect()方法的参数来改变矩形的位置、大小和样式。
记得将JavaScript代码放在