画图js实现
使用Canvas API绘制基本图形
Canvas API是HTML5提供的原生绘图工具，无需第三方库。通过获取Canvas元素的上下文对象，可以调用绘图方法：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制矩形
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
// 绘制圆形
ctx.beginPath();
ctx.arc(200, 60, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();使用SVG实现矢量图形
SVG是基于XML的矢量图形格式，可直接嵌入HTML：
<svg width="300" height="200">
<rect x="10" y="10" width="100" height="100" fill="blue"/>
<circle cx="200" cy="60" r="50" fill="red"/>
</svg>使用D3.js创建数据可视化
D3.js是专业的数据可视化库，适合创建复杂图表：
import * as d3 from 'd3';
const data = [30, 70, 110, 150];
const svg = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 200);
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (d, i) => i * 100 + 50)
.attr("cy", 100)
.attr("r", d => d / 3);使用Chart.js快速生成图表
Chart.js简化了常见图表的创建过程：
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['A', 'B', 'C'],
datasets: [{
label: 'Values',
data: [12, 19, 3],
backgroundColor: ['red', 'blue', 'green']
}]
}
});使用Three.js实现3D图形
Three.js是WebGL的封装库，适合3D场景：
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
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;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);性能优化建议
- 对于静态图形优先使用SVG
- 动态内容考虑Canvas
- 大数据量可视化使用WebGL方案
- 使用requestAnimationFrame实现动画循环
- 离屏Canvas处理复杂绘制任务
浏览器兼容性处理
- 检测API支持情况：
if (!HTMLCanvasElement.prototype.getContext) { alert('浏览器不支持Canvas'); } - 为旧版浏览器提供polyfill
- 考虑使用Modernizr进行特性检测
