当前位置：首页 > 文章列表 > 文章 > 前端 > JS绘图方法全解析

JS绘图方法全解析

2025-08-17 14:00:52 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JS绘制图形方法详解》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

JS绘制图形的核心是使用Canvas API或SVG，1. Canvas基于像素，适合高性能复杂动画；2. SVG基于矢量，适合可缩放和交互性强的图形；选择取决于需求：若需处理图像或实现流畅动画，应选Canvas；若需清晰缩放和DOM操作，应选SVG；两者均可通过JavaScript实现绘图与事件处理，合理优化可提升性能，最终需根据项目特点选择合适方案以实现最佳效果。

JS如何绘制图形

JS绘制图形，核心在于利用Canvas API或者SVG。Canvas是基于像素的，SVG是基于矢量的，选择哪个取决于你的需求。Canvas性能通常更好，适合复杂动画，SVG更灵活，适合需要缩放和修改的图形。

解决方案：

1. 使用Canvas API

Canvas API允许你通过JavaScript直接在HTML的元素上绘制图形。你需要获取canvas元素的引用，然后获取它的2D渲染上下文。

<canvas id="myCanvas" width="200"    style="max-width:100%"></canvas>
<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");

  // 绘制一个矩形
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 50, 50);

  // 绘制一个圆形
  ctx.beginPath();
  ctx.arc(100, 50, 30, 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();
  ctx.closePath();

  // 绘制一条线
  ctx.beginPath();
  ctx.moveTo(150, 20);
  ctx.lineTo(190, 80);
  ctx.strokeStyle = "green";
  ctx.stroke();
  ctx.closePath();

</script>

这段代码首先获取canvas元素和2D上下文。然后，它绘制了一个红色矩形，一个蓝色圆形和一条绿色线条。fillStyle设置填充颜色，fillRect绘制矩形，arc绘制圆形，moveTo和lineTo定义线条路径，strokeStyle设置线条颜色，stroke绘制线条。注意beginPath()和closePath()，它们用于开始和结束路径，防止图形之间互相影响。

2. 使用SVG

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式。你可以直接在HTML中嵌入SVG代码，或者使用JavaScript动态创建和修改SVG元素。

<svg width="200" height="100">
  <rect x="10" y="10" width="50" height="50" fill="red" />
  <circle cx="100" cy="50" r="30" fill="blue" />
  <line x1="150" y1="20" x2="190" y2="80" stroke="green" />
</svg>

<script>
  // 动态创建SVG元素
  const svgNS = "http://www.w3.org/2000/svg";
  const svg = document.createElementNS(svgNS, "svg");
  svg.setAttribute("width", 200);
  svg.setAttribute("height", 100);

  const rect = document.createElementNS(svgNS, "rect");
  rect.setAttribute("x", 10);
  rect.setAttribute("y", 10);
  rect.setAttribute("width", 50);
  rect.setAttribute("height", 50);
  rect.setAttribute("fill", "red");

  svg.appendChild(rect);
  document.body.appendChild(svg); //将SVG添加到页面中

</script>

这段代码首先展示了如何在HTML中直接嵌入SVG代码。然后，展示了如何使用JavaScript动态创建SVG元素。createElementNS用于创建SVG元素，setAttribute用于设置元素的属性。注意svgNS变量，它定义了SVG的命名空间。

Canvas和SVG哪个更适合我的项目？

这是一个好问题，没有绝对的答案，取决于你的具体需求。Canvas更适合像素操作，例如图像处理、游戏等。SVG更适合矢量图形，例如图表、地图等。如果需要高性能的动画，Canvas通常是更好的选择。如果需要可缩放和修改的图形，SVG更灵活。

Canvas: 像素级操作，性能高，适合复杂动画，但分辨率固定，缩放会失真。
SVG: 矢量图形，可缩放，适合图表和地图，DOM结构复杂，性能相对较低。

举个例子，如果你要绘制一个简单的饼图，SVG可能更适合，因为你可以方便地修改饼图的颜色和大小。如果你要绘制一个复杂的粒子效果，Canvas可能更适合，因为它可以提供更高的性能。

如何在Canvas中绘制复杂的图形？

Canvas API提供了Path2D对象，可以用来定义复杂的路径。你可以使用moveTo、lineTo、arc、quadraticCurveTo、bezierCurveTo等方法来定义路径，然后使用fill或stroke方法来绘制路径。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

const path = new Path2D();
path.moveTo(10, 10);
path.lineTo(100, 10);
path.quadraticCurveTo(150, 50, 100, 90);
path.lineTo(10, 90);
path.closePath();

ctx.fillStyle = "purple";
ctx.fill(path);

这段代码创建了一个Path2D对象，定义了一个包含直线和二次贝塞尔曲线的路径。然后，使用fill方法填充路径。Path2D对象可以重复使用，提高性能。

SVG如何处理事件？

SVG元素可以像普通的HTML元素一样处理事件。你可以使用addEventListener方法来监听SVG元素的事件。

<svg width="200" height="100">
  <rect id="myRect" x="10" y="10" width="50" height="50" fill="red" />
</svg>

<script>
  const rect = document.getElementById("myRect");
  rect.addEventListener("click", function() {
    alert("矩形被点击了！");
  });
</script>

这段代码监听了矩形的click事件。当矩形被点击时，会弹出一个警告框。SVG事件处理和HTML事件处理非常相似，你可以使用相同的技术来处理SVG事件。