JavaScript canvas画板,包含橡皮檫功能的完整代码:

发布时间:2023-05-02 21:07:02    发布者:文昌文城莱奥网络技术工作室    浏览次数:360

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Canvas Board</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <button id="clear">Clear</button>
    <button id="eraser">Eraser</button>
    <script src="script.js"></script>
</body>
</html>

JavaScript:

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let eraserEnabled = false;

function drawLine(x1, y1, x2, y2) {
    context.beginPath();
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.stroke();
}

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

canvas.addEventListener('mousemove', (event) => {
    if (isDrawing) {
        if (eraserEnabled) {
            context.lineWidth = 20; // 设置橡皮擦的粗细为20px
            context.clearRect(event.offsetX, event.offsetY, 10, 10);// 此处两个参数才能让橡皮擦变粗
        } else {
            context.lineWidth = 5; // 设置画笔的粗细为5px
            drawLine(lastX, lastY, event.offsetX, event.offsetY);
            lastX = event.offsetX;
            lastY = event.offsetY;
        }
    }
});

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

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

document.getElementById('eraser').addEventListener('click', () => {
    eraserEnabled = !eraserEnabled;
    if (eraserEnabled) {
        document.getElementById('eraser').innerText = 'Pencil';
    } else {
        document.getElementById('eraser').innerText = 'Eraser';
    }
});