一、Canvas核心技术优势

二、图表引擎核心实现

1. 基础架构设计

class ChartEngine {
    constructor(canvas, options = {}) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.options = this.mergeOptions(options);
        this.data = [];
        this.scale = { x: 1, y: 1 };
        this.offset = { x: 0, y: 0 };
        this.initEventListeners();
    }

    mergeOptions(options) {
        return {
            padding: 40,
            colors: ['#FF6384','#36A2EB','#FFCE56'],
            ...options
        };
    }

    initEventListeners() {
        this.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
        this.canvas.addEventListener('wheel', this.handleZoom.bind(this));
    }
}

2. 数据渲染核心

render() {
    this.clearCanvas();
    this.drawGrid();
    this.drawAxes();
    this.drawData();
    this.drawLegend();
}

drawData() {
    this.data.forEach((dataset, i) => {
        this.ctx.fillStyle = this.options.colors[i];
        this.ctx.strokeStyle = this.options.colors[i];
        this.ctx.lineWidth = 2;

        // 绘制折线
        this.ctx.beginPath();
        dataset.points.forEach((point, j) => {
            const x = this.pixelX(point.x);
            const y = this.pixelY(point.y);
            if (j === 0) {
                this.ctx.moveTo(x, y);
            } else {
                this.ctx.lineTo(x, y);
            }
        });
        this.ctx.stroke();

        // 绘制数据点
        dataset.points.forEach(point => {
            this.ctx.beginPath();
            this.ctx.arc(
                this.pixelX(point.x),
                this.pixelY(point.y),
                5, 0, Math.PI * 2
            );
            this.ctx.fill();
        });
    });
}

3. 交互功能实现

handleMouseMove(e) {
    const rect = this.canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;

    // 悬停效果
    this.data.forEach(dataset => {
        dataset.points.forEach(point => {
            const x = this.pixelX(point.x);
            const y = this.pixelY(point.y);
            const distance = Math.sqrt(
                Math.pow(mouseX - x, 2) + 
                Math.pow(mouseY - y, 2)
            );
            point.hover = distance  0 ? 0.9 : 1.1;
    const mouseX = e.clientX - this.canvas.offsetLeft;
    const mouseY = e.clientY - this.canvas.offsetTop;

    // 计算缩放中心点
    const graphX = (mouseX - this.offset.x) / this.scale.x;
    const graphY = (mouseY - this.offset.y) / this.scale.y;

    // 应用缩放
    this.scale.x *= delta;
    this.scale.y *= delta;

    // 调整偏移保持鼠标位置不变
    this.offset.x = mouseX - graphX * this.scale.x;
    this.offset.y = mouseY - graphY * this.scale.y;

    this.render();
}

三、高级功能扩展

1. 大数据优化策略

drawOptimizedLine(points) {
    const tolerance = 2; // 像素容差
    let prevX = 0, prevY = 0;
    
    this.ctx.beginPath();
    points.forEach((point, i) => {
        const x = this.pixelX(point.x);
        const y = this.pixelY(point.y);
        
        if (i === 0 || 
            Math.abs(x - prevX) > tolerance || 
            Math.abs(y - prevY) > tolerance) {
            if (i === 0) this.ctx.moveTo(x, y);
            else this.ctx.lineTo(x, y);
            prevX = x;
            prevY = y;
        }
    });
    this.ctx.stroke();
}

2. 动画过渡效果

animateTo(newData, duration = 1000) {
    const startTime = performance.now();
    const startData = JSON.parse(JSON.stringify(this.data));
    
    const animate = (time) => {
        const elapsed = time - startTime;
        const progress = Math.min(elapsed / duration, 1);
        
        this.data = startData.map((dataset, i) => ({
            ...dataset,
            points: dataset.points.map((point, j) => ({
                x: point.x + (newData[i].points[j].x - point.x) * progress,
                y: point.y + (newData[i].points[j].y - point.y) * progress
            }))
        }));
        
        this.render();
        
        if (progress < 1) {
            requestAnimationFrame(animate);
        }
    };
    
    requestAnimationFrame(animate);
}

四、性能对比数据