如何用HTML创建形状？

在HTML中创建形状主要通过CSS、Canvas和SVG三种技术实现，每种方法各有优势，适用于不同场景,以下是详细实现方式：

CSS绘制基础形状（纯代码实现）

<style>
  /* 矩形（默认） */
  .rectangle {
    width: 200px;
    height: 100px;
    background: #3498db;
  }
  /* 圆形 */
  .circle {
    width: 150px;
    height: 150px;
    background: #e74c3c;
    border-radius: 50%;  /* 关键属性 */
  }
  /* 三角形 */
  .triangle {
    width: 0;
    height: 0;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 140px solid #2ecc71;
  }
  /* 椭圆 */
  .oval {
    width: 200px;
    height: 120px;
    background: #9b59b6;
    border-radius: 100px/60px;  /* 水平半径/垂直半径 */
  }
</style>
<div class="rectangle"></div>
<div class="circle"></div>
<div class="triangle"></div>
<div class="oval"></div>

HTML5 Canvas绘制动态形状

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  // 绘制矩形（填充）
  ctx.fillStyle = '#f1c40f';
  ctx.fillRect(50, 30, 100, 80);  // (x, y, width, height)
  // 绘制圆形
  ctx.beginPath();
  ctx.arc(250, 100, 60, 0, Math.PI * 2);  // (圆心x, 圆心y, 半径, 起始角, 结束角)
  ctx.fillStyle = '#e67e22';
  ctx.fill();
  // 绘制多边形
  ctx.beginPath();
  ctx.moveTo(300, 200);  // 起点
  ctx.lineTo(350, 250);
  ctx.lineTo(320, 300);
  ctx.lineTo(280, 300);
  ctx.lineTo(250, 250);
  ctx.closePath();       // 闭合路径
  ctx.fillStyle = '#1abc9c';
  ctx.fill();
</script>

SVG绘制矢量形状（推荐复杂图形）

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- 矩形 -->
  <rect x="20" y="20" width="150" height="80" fill="#3498db" rx="10" />
  <!-- 圆形 -->
  <circle cx="280" cy="60" r="50" fill="#e74c3c" />
  <!-- 多边形 -->
  <polygon points="100,200 150,250 130,300 70,300 50,250" fill="#9b59b6" />
  <!-- 自定义路径 -->
  <path d="M250 150 L300 200 L280 250 L220 250 Z" fill="#2ecc71" />
</svg>

技术选型建议

SEO优化关键点

1. 语义化标签：使用<figure>包裹Canvas/SVG，搭配<figcaption>描述形状
2. 响应式设计：添加viewBox属性使SVG自适应，CSS形状使用百分比单位
3. ARIA属性：为装饰性图形添加role="img"和aria-label

   <figure role="img" aria-label="蓝色矩形示意图">
   <svg viewBox="0 0 100 50">...</svg>
   <figcaption>图1：CSS矩形实现原理示意图</figcaption>
   </figure>

性能优化方案

1. CSS硬件加速：为动画形状添加transform: translateZ(0)
2. Canvas缓存：复杂图形使用requestAnimationFrame更新
3. SVG精灵图：复用图形符号减少代码量

   <svg style="display:none">
   <symbol id="triangle" viewBox="0 0 100 100">
    <polygon points="50 0, 100 100, 0 100"/>
   </symbol>
   </svg>
   <svg><use href="#triangle" x="50" y="50"/></svg>

引用说明：

• CSS形状原理参考MDN文档：Border-radius生成机制
• Canvas API规范来自W3C标准：Canvas 2D Context
• SVG路径命令遵循W3C建议：SVG Paths
• 性能优化方案参考Google开发文档：渲染性能优化

通过组合使用这些技术，可创建从简单几何图形到复杂数据可视化的各类形状，对于静态展示内容优先选择SVG，交互动画场景推荐Canvas,基础UI元素使用CSS实现可保持最佳性能。