js实现白板

使用 Canvas 实现基础白板

HTML 部分需要创建一个 canvas 元素作为画布：

<canvas id="whiteboard" width="800" height="600"></canvas>

JavaScript 部分实现绘图功能：

const canvas = document.getElementById('whiteboard');
const ctx = canvas.getContext('2d');
let isDrawing = false;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

function startDrawing(e) {
    isDrawing = true;
    draw(e);
}

function draw(e) {
    if (!isDrawing) return;

    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#000';

    ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}

function stopDrawing() {
    isDrawing = false;
    ctx.beginPath();
}

添加触摸屏支持

为移动设备添加触摸事件处理：

canvas.addEventListener('touchstart', handleTouchStart);
canvas.addEventListener('touchmove', handleTouchMove);
canvas.addEventListener('touchend', handleTouchEnd);

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

function handleTouchMove(e) {
    e.preventDefault();
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent('mousemove', {
        clientX: touch.clientX,
        clientY: touch.clientY
    });
    canvas.dispatchEvent(mouseEvent);
}

function handleTouchEnd(e) {
    e.preventDefault();
    const mouseEvent = new MouseEvent('mouseup');
    canvas.dispatchEvent(mouseEvent);
}

实现撤销功能

添加撤销栈来保存绘图状态：

const undoStack = [];
let currentStep = -1;

function saveState() {
    currentStep++;
    if (currentStep < undoStack.length) {
        undoStack.length = currentStep;
    }
    undoStack.push(canvas.toDataURL());
}

function undo() {
    if (currentStep > 0) {
        currentStep--;
        const img = new Image();
        img.onload = function() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0);
        };
        img.src = undoStack[currentStep];
    }
}

// 在每次绘制结束时调用 saveState()
function stopDrawing() {
    isDrawing = false;
    ctx.beginPath();
    saveState();
}

添加颜色选择器

HTML 添加颜色选择控件：

<input type="color" id="colorPicker" value="#000000">

JavaScript 更新绘图颜色：

const colorPicker = document.getElementById('colorPicker');

colorPicker.addEventListener('input', function() {
    ctx.strokeStyle = this.value;
});

实现橡皮擦功能

添加橡皮擦切换按钮：

<button id="eraser">橡皮擦</button>

JavaScript 实现橡皮擦功能：

const eraserBtn = document.getElementById('eraser');
let isEraser = false;

eraserBtn.addEventListener('click', function() {
    isEraser = !isEraser;
    if (isEraser) {
        ctx.strokeStyle = '#ffffff';
        this.classList.add('active');
    } else {
        ctx.strokeStyle = colorPicker.value;
        this.classList.remove('active');
    }
});

保存白板内容

添加保存功能按钮：

<button id="saveBtn">保存</button>

JavaScript 实现保存功能：

document.getElementById('saveBtn').addEventListener('click', function() {
    const link = document.createElement('a');
    link.download = 'whiteboard.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
});

响应式调整画布大小

使画布适应窗口大小变化：

function resizeCanvas() {
    canvas.width = window.innerWidth * 0.9;
    canvas.height = window.innerHeight * 0.8;
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

添加清除画布功能

实现清除整个画布的功能：

document.getElementById('clearBtn').addEventListener('click', function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    saveState();
});