当前位置：首页 > JavaScript

js实现图形

2026-02-02 02:14:23JavaScript

JavaScript 实现图形的方法

在 JavaScript 中实现图形可以通过多种方式，包括使用 Canvas API、SVG、WebGL 以及第三方库（如 D3.js、Three.js 等）。以下是几种常见的方法：

使用 Canvas API

Canvas 是 HTML5 提供的一个绘图 API，可以通过 JavaScript 动态绘制图形。

// 获取 Canvas 元素
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制矩形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

// 绘制圆形
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();

Canvas 适合需要高性能的动态图形绘制，例如游戏或动画。

使用 SVG

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，可以直接嵌入 HTML 中。

js实现图形

<svg width="200" height="200">
  <rect x="10" y="10" width="100" height="100" fill="red" />
  <circle cx="150" cy="150" r="50" fill="blue" />
</svg>

SVG 的优势是图形可以无限缩放而不失真，适合需要交互的静态图形。

使用 WebGL

WebGL 是一种基于 OpenGL ES 的 JavaScript API，用于在浏览器中渲染高性能的 3D 和 2D 图形。

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

// 设置清空颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

WebGL 适合需要复杂 3D 渲染的场景，例如数据可视化或游戏。

js实现图形

使用第三方库

许多第三方库简化了图形的实现：

D3.js：用于数据驱动的动态图形和数据可视化。

d3.select("body").append("svg")
  .attr("width", 200)
  .attr("height", 200)
  .append("circle")
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("r", 50)
  .attr("fill", "green");

Three.js：用于 3D 图形渲染。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);