JavaScript canvas画板，包含橡皮檫功能的完整代码：
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';
}
});