html如何画矩形_HTML矩形绘制（CSS border/Canvas）方法

网页中绘制矩形主要用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></div>

你还可以通过 background-color 添加填充色，让矩形更明显：

立即学习“前端免费学习笔记（深入）”；

<div></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受盒模型影响。理解清楚就能灵活运用。