当前位置：首页 > JavaScript

js实现图形

2026-03-15 01:41:14JavaScript

JavaScript 实现图形的方法

使用 Canvas API

Canvas API 是 HTML5 提供的原生绘图工具，适合绘制复杂的动态图形。通过获取 Canvas 上下文，可以绘制线条、形状、文本和图像。

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

Canvas 支持路径绘制、渐变、阴影等高级功能，适合游戏或数据可视化场景。

使用 SVG

SVG 是基于 XML 的矢量图形技术，可以通过 DOM 操作动态修改。SVG 图形在缩放时不会失真，适合需要高保真度的场景。

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');
svg.appendChild(circle);
document.body.appendChild(svg);

SVG 支持动画和事件监听，适合交互式图表或图标系统。

使用 WebGL

WebGL 是基于 OpenGL ES 的 3D 图形 API，适合高性能的 3D 渲染。需要一定的图形学基础，但可以实现复杂的 3D 效果。

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

WebGL 通常与 Three.js 等库结合使用，简化开发流程。

使用图表库

对于数据可视化，可以直接使用成熟的图表库，如 Chart.js、D3.js 或 ECharts。这些库封装了复杂的绘图逻辑，提供简洁的 API。

const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            label: 'Colors',
            data: [10, 20, 30],
            backgroundColor: ['red', 'blue', 'yellow']
        }]
    }
});

图表库适合快速实现统计图表或仪表盘。

使用 CSS 绘制简单图形

对于简单的几何图形，可以直接用 CSS 实现。结合 JavaScript 动态修改样式，可以实现基本的图形效果。

js实现图形

const div = document.createElement('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = 'green';
div.style.borderRadius = '50%';
document.body.appendChild(div);

CSS 绘制适合简单的 UI 元素或装饰性图形。