当前位置：首页 > JavaScript

js 实现画板

2026-04-06 12:46:25JavaScript

使用 Canvas API 创建基础画板

HTML 中需添加 <canvas> 元素作为画布容器：

<canvas id="drawing-board" width="800" height="600"></canvas>

JavaScript 初始化画布并设置绘图上下文：

const canvas = document.getElementById('drawing-board');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#000000'; // 默认画笔颜色
ctx.lineWidth = 5; // 默认线条粗细

实现鼠标绘图功能

监听鼠标事件实现自由绘制：

let isDrawing = false;

canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
});

canvas.addEventListener('mousemove', (e) => {
    if (!isDrawing) return;
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
});

canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);

添加绘图工具控制

实现颜色和粗细选择功能：

<input type="color" id="color-picker" value="#000000">
<input type="range" id="brush-size" min="1" max="50" value="5">

JavaScript 同步工具状态：

document.getElementById('color-picker').addEventListener('change', (e) => {
    ctx.strokeStyle = e.target.value;
});

document.getElementById('brush-size').addEventListener('input', (e) => {
    ctx.lineWidth = e.target.value;
});

实现清除画布功能

添加清除按钮及功能：

<button id="clear-btn">清除画布</button>

JavaScript 清除逻辑：

document.getElementById('clear-btn').addEventListener('click', () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

进阶功能：保存绘图结果

通过转换为 Data URL 保存图像：

document.getElementById('save-btn').addEventListener('click', () => {
    const link = document.createElement('a');
    link.download = 'drawing.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
});

触摸屏适配方案

添加触摸事件支持：

canvas.addEventListener('touchstart', (e) => {
    e.preventDefault();
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent('mousedown', {
        clientX: touch.clientX,
        clientY: touch.clientY
    });
    canvas.dispatchEvent(mouseEvent);
});

// 类似添加 touchmove 和 touchend 事件

性能优化建议

对于复杂绘图可使用以下优化：

js 实现画板

// 使用 requestAnimationFrame 节流
function throttle(callback) {
    let waiting = false;
    return function() {
        if (!waiting) {
            requestAnimationFrame(() => {
                callback.apply(this, arguments);
                waiting = false;
            });
            waiting = true;
        }
    };
}