当前位置：首页 > JavaScript

js实现涂鸦面板

2026-03-15 14:42:57JavaScript

实现涂鸦面板的基本思路

涂鸦面板的核心功能是允许用户在画布上通过鼠标或触摸操作自由绘制线条。HTML5的Canvas API是实现这一功能的理想选择。

js实现涂鸦面板

创建基础HTML结构

<!DOCTYPE html>
<html>
<head>
    <title>涂鸦面板</title>
    <style>
        #drawingCanvas {
            border: 1px solid #000;
            cursor: crosshair;
        }
    </style>
</head>
<body>
    <canvas id="drawingCanvas" width="800" height="600"></canvas>
    <script src="drawing.js"></script>
</body>
</html>

初始化画布和绘制上下文

const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
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);

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.strokeStyle = '#000';
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    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 rect = canvas.getBoundingClientRect();
    [lastX, lastY] = [touch.clientX - rect.left, touch.clientY - rect.top];
    isDrawing = true;
}

function handleTouchMove(e) {
    e.preventDefault();
    if (!isDrawing) return;

    const touch = e.touches[0];
    const rect = canvas.getBoundingClientRect();
    const currentX = touch.clientX - rect.left;
    const currentY = touch.clientY - rect.top;

    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(currentX, currentY);
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.stroke();

    [lastX, lastY] = [currentX, currentY];
}

function handleTouchEnd() {
    isDrawing = false;
}

添加颜色选择功能

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

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

添加线宽控制

<input type="range" id="lineWidth" min="1" max="50" value="5">

const lineWidth = document.getElementById('lineWidth');
lineWidth.addEventListener('input', function() {
    ctx.lineWidth = this.value;
});

实现清除画布功能

<button id="clearCanvas">清除</button>

const clearButton = document.getElementById('clearCanvas');
clearButton.addEventListener('click', function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

保存绘制内容

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

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

优化绘制性能

// 使用requestAnimationFrame优化绘制
function drawOptimized(e) {
    if (!isDrawing) return;

    requestAnimationFrame(() => {
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
        [lastX, lastY] = [e.offsetX, e.offsetY];
    });
}

添加橡皮擦功能

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

const eraser = document.getElementById('eraser');
eraser.addEventListener('click', function() {
    ctx.strokeStyle = '#FFFFFF'; // 假设背景是白色
    ctx.lineWidth = 20; // 设置较大的橡皮擦尺寸
});

这个实现提供了基本的涂鸦功能，包括鼠标和触摸支持、颜色选择、线宽调整、清除和保存功能。可以根据需要进一步扩展，比如添加撤销/重做功能、不同画笔样式或图层支持等。