当前位置：首页 > JavaScript

js 实现画板

2026-03-14 18:59:33JavaScript

使用 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');
let isDrawing = false;

// 设置初始绘制样式
ctx.strokeStyle = '#000000';
ctx.lineWidth = 5;
ctx.lineCap = 'round';

// 鼠标按下事件
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);

添加颜色和粗细控制

扩展功能面板的 HTML：

<div class="tools">
    <input type="color" id="color-picker" value="#000000">
    <input type="range" id="brush-size" min="1" max="50" value="5">
    <button id="clear-btn">清空画板</button>
</div>

对应的 JavaScript 控制逻辑：

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

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

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

实现触摸屏支持

添加触摸事件处理：

// 触摸开始
canvas.addEventListener('touchstart', (e) => {
    e.preventDefault();
    isDrawing = true;
    const touch = e.touches[0];
    const rect = canvas.getBoundingClientRect();
    ctx.beginPath();
    ctx.moveTo(touch.clientX - rect.left, touch.clientY - rect.top);
});

// 触摸移动
canvas.addEventListener('touchmove', (e) => {
    e.preventDefault();
    if (!isDrawing) return;
    const touch = e.touches[0];
    const rect = canvas.getBoundingClientRect();
    ctx.lineTo(touch.clientX - rect.left, touch.clientY - rect.top);
    ctx.stroke();
});

// 触摸结束
canvas.addEventListener('touchend', () => isDrawing = false);

保存画布为图片

添加保存功能按钮：

<button id="save-btn">保存图片</button>

实现保存逻辑：

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

添加撤销/重做功能

使用数组记录绘图历史：

js 实现画板

let drawingHistory = [];
let historyIndex = -1;

function saveDrawingState() {
    historyIndex++;
    if (historyIndex < drawingHistory.length) {
        drawingHistory.length = historyIndex;
    }
    drawingHistory.push(canvas.toDataURL());
}

// 在每次绘制结束后调用 saveDrawingState()

document.getElementById('undo-btn').addEventListener('click', () => {
    if (historyIndex <= 0) return;
    historyIndex--;
    const img = new Image();
    img.onload = () => ctx.drawImage(img, 0, 0);
    img.src = drawingHistory[historyIndex];
});

document.getElementById('redo-btn').addEventListener('click', () => {
    if (historyIndex >= drawingHistory.length - 1) return;
    historyIndex++;
    const img = new Image();
    img.onload = () => ctx.drawImage(img, 0, 0);
    img.src = drawingHistory[historyIndex];
});