Бумага для холста HTML5

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

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

Ответ 1

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

Ответ на вопрос ниже более подробно:

"Стирание" в холсте html5

Ответ 2

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

Ответ 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)";
}

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

Ответ 4

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

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

function eraser(){
    context.globalCompositeOperation = "destination-out";  
    context.strokeStyle = "rgba(255,255,255,1)";
}

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

Ответ 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 code

Ответ 6

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

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

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