如何在HTML上画图？轻松实现！

在HTML中绘制图形主要通过三种技术实现：Canvas、SVG和CSS绘图，每种方案各有特点，适合不同场景,以下是详细实现方法和应用示例：

Canvas（位图绘制）

通过JavaScript动态生成像素图形，适合游戏、数据可视化等高频刷新场景。

<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  // 绘制矩形
  ctx.fillStyle = '#3498db';
  ctx.fillRect(50, 30, 100, 80);  // 位置(50,30) 宽100高80
  // 绘制圆形
  ctx.beginPath();
  ctx.arc(280, 70, 40, 0, Math.PI * 2); // 圆心(280,70) 半径40
  ctx.fillStyle = '#e74c3c';
  ctx.fill();
  // 绘制文字
  ctx.font = '16px Arial';
  ctx.fillStyle = '#2c3e50';
  ctx.fillText('Canvas动态图形', 130, 180);
</script>

特点：

• 逐像素渲染，适合复杂动画
• 图像放大易失真（位图特性）
• 需通过JavaScript操作

SVG（矢量图形）

通过XML标签创建可缩放矢量图，适合图标、图表等需要缩放的场景。

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 矩形 -->
  <rect x="50" y="30" width="100" height="80" fill="#3498db" />
  <!-- 圆形 -->
  <circle cx="280" cy="70" r="40" fill="#e74c3c" />
  <!-- 文字 -->
  <text x="150" y="180" font-family="Arial" font-size="16" fill="#2c3e50">
    SVG矢量图形
  </text>
  <!-- 复杂路径示例 -->
  <path d="M100 100 L150 150 L200 100 Z" fill="#9b59b6" />
</svg>

优势：

• 无限缩放不失真（矢量特性）
• 可通过CSS控制样式
• 支持鼠标事件交互
• 直接嵌入HTML文档

CSS绘图（简单形状）

利用CSS样式创建基础几何图形,适合装饰性元素。

<style>
  .rectangle {
    width: 100px; height: 80px;
    background: #3498db;
    margin: 30px 50px;
  }
  .circle {
    width: 80px; height: 80px;
    background: #e74c3c;
    border-radius: 50%;
    position: absolute;
    top: 30px; right: 80px;
  }
  .triangle {
    width: 0; height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #9b59b6;
    margin: 20px auto;
  }
</style>
<div class="rectangle"></div>
<div class="circle"></div>
<div class="triangle"></div>

适用场景：

• 纯色简单形状（矩形/圆形/三角形）
• 悬停动画效果
• 无复杂细节的装饰元素

技术选型建议

最佳实践

1. 响应式适配：

   /* SVG响应式 */
   svg { max-width: 100%; height: auto; }
   /* Canvas等比缩放 */
   function resizeCanvas() {
     canvas.width = window.innerWidth * 0.8;
     canvas.height = canvas.width * 0.5;
   }

2. 性能优化：

   

   • Canvas：使用requestAnimationFrame做动画
   • SVG：避免单个文件包含数千个节点
   • CSS：优先使用transform代替位置变化

3. 交互实现：

   // Canvas点击检测
   canvas.addEventListener('click', e => {
     const x = e.offsetX, y = e.offsetY;
     if (ctx.isPointInPath(shapePath, x, y)) {
       alert('点击了图形!');
     }
   });
   // SVG直接绑定事件
   document.querySelector('svg circle').addEventListener('click', () => {
     alert('圆形被点击!');
   });

引用说明参考Mozilla开发者网络（MDN）权威文档：

• Canvas教程
• SVG官方规范
• CSS图形技术