如何用JavaScript实现画板（Canvas Drawing）？

// 获取Canvas元素
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 定义画笔的颜色和宽度
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;

// 定义鼠标按下、移动和松开的事件处理函数
let isDrawing = false;
let lastX = 0;
let lastY = 0;

canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mousemove', (e) => {
    if (isDrawing) {
        draw(e.offsetX, e.offsetY);
        [lastX, lastY] = [e.offsetX, e.offsetY];
    }
});

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

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

// 绘图函数
function draw(x, y) {
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(x, y);
    ctx.stroke();
}

// 添加颜色和宽度选择器
const colorPicker = document.getElementById('colorPicker');
const widthPicker = document.getElementById('widthPicker');

colorPicker.addEventListener('change', (e) => {
    ctx.strokeStyle = e.target.value;
});

widthPicker.addEventListener('change', (e) => {
    ctx.lineWidth = e.target.value;
});

// 橡皮擦功能
const eraser = document.getElementById('eraser');

eraser.addEventListener('click', () => {
    ctx.strokeStyle = 'white'; // 假设背景色是白色
});

// 保存画作
const saveBtn = document.getElementById('saveBtn');

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

// 优化后的绘图函数
function draw(x, y) {
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(x, y);
    ctx.stroke();
    [lastX, lastY] = [x, y];
}

// 性能优化，使用requestAnimationFrame
let isDrawing = false;
let lastX = 0;
let lastY = 0;

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

canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('touchmove', drawIfNeeded);
canvas.addEventListener('touchend', stopDrawing);

function startDrawing(e) {
    isDrawing = true;
    [lastX, lastY] = getCoordinates(e);
}

function drawIfNeeded(e) {
    if (!isDrawing) return;
    const [x, y] = getCoordinates(e);
    requestAnimationFrame(() => draw(x, y));
}

function stopDrawing() {
    isDrawing = false;
}

function getCoordinates(e) {
    if (e.touches) {
        return [e.touches[0].clientX, e.touches[0].clientY];
    } else {
        return [e.offsetX, e.offsetY];
    }
}