当前位置：首页 > JavaScript

js实现画板

2026-03-15 04:57:20JavaScript

使用Canvas实现基础画板

在HTML中创建<canvas>元素并设置宽高：

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

获取Canvas上下文并设置绘图样式：

const canvas = document.getElementById('drawing-board');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#000000';
ctx.lineWidth = 5;
ctx.lineCap = 'round';

实现鼠标绘图功能

添加鼠标事件监听器跟踪绘图状态：

let isDrawing = false;
let lastX = 0;
let lastY = 0;

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

实现绘图核心函数：

js实现画板

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

function draw(e) {
    if (!isDrawing) return;
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    [lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
    isDrawing = false;
}

添加触摸屏支持

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

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() {
    const mouseEvent = new MouseEvent('mouseup');
    canvas.dispatchEvent(mouseEvent);
}

实现画板功能扩展

添加颜色选择器：

js实现画板

<input type="color" id="color-picker" value="#000000">

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

添加画笔粗细控制：

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

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

添加清除画布按钮：

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

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

保存绘图内容

实现画布保存为图片功能：

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

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

这些代码组合起来可以创建一个功能完整的绘图应用，支持鼠标和触摸输入，具有颜色选择、画笔大小调整、清除画布和保存图片等功能。