JavaScript+Canvas绘制矩形详解与实例

在本文档中，我们将深入探讨如何使用JavaScript (JS) 和 HTML5 的 Canvas API 来绘制矩形。Canvas 是一个HTML5特性，它提供了一个在网页上进行2D图形绘制的平台，通过JavaScript可以动态创建、修改和渲染图形。文档主要讲解了两个关键函数：`draw()` 和 `drawBorder()`，这两个函数用于在不同的canvas元素上绘制矩形。 首先，`draw(id)` 函数演示了如何在id为"canvas"的canvas元素上绘制矩形。步骤如下： 1. 获取canvas元素：通过`document.getElementById("canvas")`获取到指定id的canvas对象。 2. 初始化2D渲染上下文：`context=canvas.getContext("2d")`，这是与canvas交互的主要接口。 3. 设置填充颜色和样式：`context.fillStyle="#DDDDDD"` 设置填充色为浅灰色，`context.strokeStyle="black"` 设置边框线颜色为黑色。 4. 使用`fillRect(x, y, width, height)`方法绘制矩形，这里分别绘制了一个宽400px，高400px的矩形和一个宽200px，高300px的矩形。 5. 使用`strokeRect(x, y, width, height)`方法绘制边框，用于强调填充区域。 接下来的`drawBorder(id)`函数展示了带有边框的矩形绘制： 1. 该函数同样通过`canvas2`元素进行操作，设置填充颜色为红色，边框线颜色依然为黑色。 2. 使用`fillRect()`和`strokeRect()`方法绘制一个宽300px，高200px的矩形，这次边框线被强调。 文档提供了相应的`window.onload`事件处理函数，当页面加载完成时会自动调用这两个函数，绘制出两个不同风格的矩形。通过这个例子，开发者可以学习到如何利用JavaScript动态控制Canvas绘制形状，并掌握基本的填充和描边操作。 总结来说，本文档的重点是教授初学者如何使用JavaScript结合HTML5的Canvas API来实现基础的矩形绘制，包括填充和边框效果。这对于前端开发者在实现网站动态交互或游戏界面等场景中非常实用。通过实践这些代码，读者可以加深对Canvas API的理解和运用能力。