网页中绘制矩形主要用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 属性添加边框，形成可见轮廓
示例代码：
你还可以通过 background-color 添加填充色，让矩形更明显：
立即学习“前端免费学习笔记（深入）”；
使用Canvas绘制矩形
当需要更复杂的图形操作（如动画、路径、渐变等）时，推荐使用 canvas> 元素结合 JavaScript 绘图。
- 在 HTML 中定义 canvas 标签并设置宽高
- 通过 JavaScript 获取绘图上下文
- 调用
fillRect()或strokeRect()方法绘制填充或描边矩形
示例代码：
Canvas 更适合动态图形，比如游戏界面、数据可视化等场景。
两种方法对比与选择建议
CSS 方式更适合静态结构，易于维护，兼容性好；Canvas 则适合需要频繁重绘或交互的图形应用。
- 如果只是展示一个带颜色的方块或卡片背景，用 CSS 更高效
- 如果要实现动画移动的矩形、用户绘图功能，应选择 Canvas
- CSS 支持响应式布局，Canvas 需手动处理缩放和分辨率问题
基本上就这些。根据实际需求选择合适的方式即可。不复杂但容易忽略细节，比如Canvas坐标原点在左上角，而CSS受盒模型影响。理解清楚就能灵活运用。
