js实现图形

在JavaScript中实现图形可以通过多种方式，以下是常见的几种方法：

使用Canvas API

Canvas是HTML5提供的绘图API，适合动态图形和游戏开发。以下是一个绘制简单矩形的示例：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

Canvas支持路径绘制、文本渲染和图像操作，适合高性能图形需求。

使用SVG

SVG是矢量图形标准，可通过DOM操作。以下示例创建一个圆形：

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '200');
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '40');
circle.setAttribute('fill', 'blue');
svg.appendChild(circle);
document.body.appendChild(svg);

SVG适合需要缩放保持清晰度的场景。

使用WebGL

WebGL提供3D图形渲染能力，基于OpenGL ES。以下代码初始化WebGL上下文：

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
    alert('无法初始化WebGL');
    return;
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

WebGL适合复杂3D可视化，但学习曲线较陡。

使用图形库

第三方库简化图形开发：

• 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);

• D3.js：数据可视化库
• Chart.js：图表库

这些库提供高级抽象，适合快速开发。

CSS图形

通过CSS的clip-path、border-radius等属性创建简单图形：

<div style="width:100px; height:100px; background:green; border-radius:50%"></div>

适合静态UI元素，性能开销小。

选择方法时需考虑：

• 性能需求
• 图形复杂度
• 浏览器兼容性
• 开发效率