html如何画矩形_HTML矩形绘制（CSS border/Canvas）方法-html教程-PHP中文网

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

星夢妙者

发布： 2025-11-06 22:35:02

原创

501人浏览过

网页中绘制矩形主要用CSS border和HTML5 Canvas；2. CSS通过设置div的width、height和border创建静态矩形，适合布局与装饰；3. Canvas通过JavaScript调用fillRect或strokeRect绘制，适用于动画、交互等动态场景；4. CSS简单高效、支持响应式，Canvas需手动处理分辨率但图形控制更灵活；5. 静态图形推荐CSS，动态效果选择Canvas。

html如何画矩形_html矩形绘制（css border/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 更适合动态图形，比如游戏界面、数据可视化等场景。