js实现矩形
使用Canvas绘制矩形
在HTML5中，可以通过Canvas API绘制矩形。需要获取Canvas元素的上下文，然后使用fillRect()或strokeRect()方法绘制填充或描边矩形。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 50); // x, y, width, height使用SVG创建矩形
SVG（可缩放矢量图形）提供<rect>元素直接定义矩形。通过设置x、y、width、height等属性控制形状。
<svg width="200" height="100">
<rect x="10" y="10" width="100" height="50" fill="green" />
</svg>通过CSS绘制矩形
纯CSS可以通过div元素的width、height和background-color属性模拟矩形，结合border或box-shadow实现更多样式。
.rectangle {
width: 100px;
height: 50px;
background-color: red;
}动态生成矩形（DOM操作）
使用JavaScript动态创建DOM元素并设置样式，适合需要交互的场景。
const rect = document.createElement('div');
rect.style.width = '100px';
rect.style.height = '50px';
rect.style.backgroundColor = 'yellow';
document.body.appendChild(rect);使用WebGL绘制矩形
WebGL适合高性能图形渲染，需通过着色器程序定义顶点数据绘制矩形。
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
// 顶点数据和着色器代码需另行定义注意事项
- Canvas性能：适合动态图形，但频繁重绘可能影响性能。
- SVG兼容性：矢量特性适合缩放，但复杂场景可能受限。
- CSS简便性：无需脚本，但动态控制较弱。
根据需求选择合适的方法：Canvas适合游戏或动画，SVG适合矢量图形，CSS适合简单UI元素。
