JavaScript 绘制正方形的方法

在网页开发中，使用 JavaScript 绘制正方形是一项常见的任务。掌握这一技能可以为网页增添各种有趣的图形元素，提升用户体验。以下将详细介绍几种使用 JavaScript 绘制正方形的方法。

使用 HTML5 Canvas 元素

HTML5 的 Canvas 元素为我们提供了强大的绘图能力。在 HTML 文件中创建一个 Canvas 画布：

<canvas id="myCanvas" width="200" height="200"></canvas>

然后，通过 JavaScript 获取画布上下文并绘制正方形：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.stroke();

在这段代码中，ctx.rect(x, y, width, height) 方法用于定义正方形的位置和大小。fillStyle 和 strokeStyle 分别设置填充颜色和边框颜色。

使用 CSS 和 JavaScript 动态创建元素

另一种方法是通过 JavaScript 动态创建 HTML 元素，并使用 CSS 样式来使其呈现为正方形。首先，在 JavaScript 中创建一个元素：

const square = document.createElement('div');
square.style.width = '100px';
square.style.height = '100px';
square.style.backgroundColor ='red';
document.body.appendChild(square);

这段代码创建了一个 <div> 元素，通过设置宽度和高度相等，并指定背景颜色，使其看起来像一个正方形。然后将其添加到页面主体中。

SVG 与 JavaScript 结合

SVG（可缩放矢量图形）也是绘制正方形的有效方式。可以在 HTML 中直接嵌入 SVG 代码，也可以通过 JavaScript 动态创建。以下是通过 JavaScript 创建 SVG 正方形的示例：

const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '200');
const rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
rect.setAttribute('x', '50');
rect.setAttribute('y', '50');
rect.setAttribute('width', '100');
rect.setAttribute('height', '100');
rect.setAttribute('fill', 'green');
svg.appendChild(rect);
document.body.appendChild(svg);

在这个例子中，我们使用 createElementNS 方法创建 SVG 元素和矩形元素，并设置其属性。

通过以上几种方法，开发者可以根据项目的具体需求，灵活选择合适的方式使用 JavaScript 绘制正方形。无论是简单的图形展示还是复杂的交互设计，这些技巧都能发挥重要作用，为网页开发带来更多创意和可能性。