网页中绘制矩形主要用css border和html5 canvas；2. CSS通过设置div的width、height和border创建静态矩形，适合布局与装饰；3. canvas通过javaScript调用fillRect或strokeRect绘制，适用于动画、交互等动态场景；4. CSS简单高效、支持响应式，Canvas需手动处理分辨率但图形控制更灵活；5. 静态图形推荐CSS，动态效果选择Canvas。
在网页开发中，绘制矩形可以通过多种方式实现，最常见的是使用 CSS border 和 html5 Canvas。两种方法适用于不同场景，下面分别介绍具体用法。
使用CSS border绘制矩形
通过设置元素的宽度、高度和边框，可以轻松创建一个矩形。这是最简单且常用的方法，适合用于布局或装饰性图形。
- 创建一个 div 元素，并通过 CSS 设置其尺寸和样式
- 利用 width 和 height 定义矩形大小
- 使用 border 属性添加边框，形成可见轮廓
示例代码：
<div style="width: 200px; height: 100px; border: 2px solid black;"></div>
你还可以通过 background-color 添加填充色，让矩形更明显：
立即学习“前端免费学习笔记（深入）”；
<div style="width: 200px; height: 100px; background-color: lightblue; border: 1px solid blue;"></div>
使用Canvas绘制矩形
当需要更复杂的图形操作（如动画、路径、渐变等）时，推荐使用 <canvas> 元素结合 javascript 绘图。
- 在 HTML 中定义 canvas 标签并设置宽高
- 通过 JavaScript 获取绘图上下文
- 调用
fillRect()或strokeRect()方法绘制填充或描边矩形
示例代码：
<canvas id="myCanvas" width="200" height="100"></canvas> <script> const ctx = document.getElementById('myCanvas').getContext('2d'); // 绘制一个蓝色填充矩形 ctx.fillStyle = 'lightgreen'; ctx.fillRect(0, 0, 200, 100); // 可选：添加边框 ctx.strokeStyle = 'green'; ctx.strokeRect(0, 0, 200, 100); </script>
Canvas 更适合动态图形，比如游戏界面、数据可视化等场景。
两种方法对比与选择建议
CSS 方式更适合静态结构，易于维护，兼容性好；Canvas 则适合需要频繁重绘或交互的图形应用。
- 如果只是展示一个带颜色的方块或卡片背景，用 CSS 更高效
- 如果要实现动画移动的矩形、用户绘图功能，应选择 Canvas
- CSS 支持响应式布局，Canvas 需手动处理缩放和分辨率问题
基本上就这些。根据实际需求选择合适的方式即可。不复杂但容易忽略细节，比如Canvas坐标原点在左上角，而CSS受盒模型影响。理解清楚就能灵活运用。