当前位置：首页 > JavaScript

js画图实现

2026-04-03 20:16:08JavaScript

JavaScript 画图实现方法

使用 HTML5 Canvas

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, 60, 50, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();

使用 SVG

SVG 是基于 XML 的矢量图形格式，可以通过 JavaScript 动态创建和修改。

// 创建 SVG 元素
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "300");
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", "green");

// 添加到 SVG
svg.appendChild(circle);
document.body.appendChild(svg);

使用第三方库

有许多强大的 JavaScript 库可以简化绘图过程。

Chart.js (数据可视化)

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

D3.js (数据驱动文档)

const data = [4, 8, 15, 16, 23, 42];
d3.select(".chart")
  .selectAll("div")
  .data(data)
  .enter().append("div")
  .style("width", d => d * 10 + "px")
  .text(d => d);

p5.js (创意编程)

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(200, 200, 50, 50);
}

WebGL 3D 绘图

对于 3D 图形，可以使用 Three.js 等库。

js画图实现

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

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();