JS如何绘制图形-js教程-PHP中文网

JS如何绘制图形

幻夢星雲

发布： 2025-08-16 13:41:01

原创

692人浏览过

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>

登录后复制

元素上绘制图形。你需要获取canvas元素的引用，然后获取它的2D渲染上下文。

<canvas id="myCanvas" width="200" height="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更灵活。

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

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>

登录后复制

这段代码监听了矩形的