在 HTML5 canvas 白板中添加擦除墨水功能

Question

我創建了一個 HTML5 canvas 白板，可用於使用鼠標書寫任何內容。我曾嘗試將橡皮擦功能添加到白板上，這將擦除屏幕上的像素，但它不起作用。 我正在分享代碼的相關部分

function drawOnCanvas() {
var canvas = document.querySelector('#board');
this.ctx = canvas.getContext('2d');
var ctx = this.ctx;

var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));

var mouse = {x: 0, y: 0};
var last_mouse = {x: 0, y: 0};

/* Mouse Capturing Work */
canvas.addEventListener('mousemove', function(e) {
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;

    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop;
}, false);


/* Drawing on Paint App */
ctx.lineWidth = (writeMode===1)?5:8;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'blue';
setTimeout(()=>{
  ctx.strokeStyle = (writeMode===1)?'blue':'white';  //choose pen or eraser (pen is 1 and eraser is 0)
},100)

canvas.addEventListener('mousedown', function(e) {
    canvas.addEventListener('mousemove', onPaint, false);
}, false);

canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
}, false);

var root = this;
var onPaint = function() {
    ctx.beginPath();
    ctx.moveTo(last_mouse.x, last_mouse.y);
    ctx.lineTo(mouse.x, mouse.y);
    ctx.closePath();
    ctx.stroke();
};

}

請幫我在現有代碼中添加橡皮擦功能

Answer 1

嘗試使用與 canvas 的背景顏色相同顏色的畫筆。 它看起來像擦除，但就像在白紙上塗白。

建議您的代碼：使用let而不是var for onPaint ，改為使用function onPaint() {...} 。