HTML5 Canvas Eraser

Question

Есть способ реализовать ластик (кроме использования белого карандаша?).

Я использую наслоение, у меня есть изображение под холстом, поэтому, если ластик закрасит белый, пользователь заметит, так как изображение ниже не является сплошным белым.

Answer 1

Как правило, установите globalCompositeOperation на copy и рисуйте, используя цвет с непрозрачностью ноль, например, "rgba(0,0,0,0)", как вы пытались.

На вопрос ответ здесь более подробно здесь:

«Стирание» в html5 canvas

Answer 2

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing

На самом деле функция:

function eraser(){                              
    context.strokeStyle = "rgb(255, 255, 255)";
    context.globalCompositeOperation = "destination-out";  
    context.strokeStyle = ("rgba(255,255,255,255)");
    /* or */
    context.fillStyle = "rgba(255,0,0,0)";
}

И вы можете вернуться к источнику.

Answer 3

function eraser()
{                                
context.strokeStyle = "rgb(255, 255, 255)";
context.globalCompositeOperation = "copy";  
context.strokeStyle = ("rgba(255,255,255,255)"); /* or */ context.fillStyle = "rgba(255,0,0,0)";
}

оба работали в моем случае!

Answer 4

В качестве альтернативы вы можете использовать несколько <canvas> объектов, нарисованных друг над другом, а затем стереть с верхнего холста, чтобы показать изображение под ним. См .: html5 - элемент canvas - несколько слоев

Answer 5

Код для прозрачного ластика с использованием globalCompositeOperation «destination-out» и «source-over»

var handleMouseMove = function (event) {
    midPt = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);

   if(curTool.type=="eraser"){

      var tempcanvas = document.getElementById('drawcanvas');
      var tempctx=tempcanvas.getContext("2d");
      tempctx.beginPath();
      tempctx.globalCompositeOperation = "destination-out";   
      tempctx.arc(midPt.x, midPt.y, 20, 0, Math.PI * 2, false);     
      tempctx.fill();
      tempctx.closePath();
      tempctx.globalCompositeOperation = "source-over";
      drawingCanvas.graphics.clear();

      // keep updating the array for points 
      arrMidPtx.push(midPt.x);
      arrMidPty.push(midPt.y);
      stage.addChild(drawingCanvas);
      stage.update();

    }

Я использовал здесь easeljs, однако код не зависит от него и может быть интегрирован с любым холстом html5-рисункакод JavaScript

Answer 6

установите цвет карандаша на прозрачный:

context.fillStyle = "rgba(255,0,0,0)";

в формате rgba(), последний - альфа-канал, 0 - полностью прозрачный