HTML5 Canvas eraser

Question

Có một cách để thực hiện một cục tẩy (trừ việc sử dụng bút chì màu trắng?).

Tôi đang sử dụng lớp, tôi có hình ảnh bên dưới canvas, vì vậy, nếu công cụ xóa sơn màu trắng, người dùng sẽ chú ý vì hình ảnh bên dưới không phải là màu trắng.

Answer 1

đặt màu bút chì để minh bạch:

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

ở định dạng rgba(), người cuối cùng là kênh alpha, 0 là hoàn toàn minh bạch

Answer 2

Là một thay thế, bạn có thể sử dụng nhiều <canvas> đối tượng được vẽ trên lẫn nhau, sau đó xóa khỏi canvas trên cùng để lộ hình ảnh bên dưới. Xem: html5 - canvas element - Multiple layers

Answer 3

Về cơ bản, đặt globalCompositeOperation thành copy và vẽ bằng cách sử dụng màu có độ mờ bằng không, ví dụ: "rgba(0,0,0,0)" như bạn đang thử.

Câu hỏi đặt ra là đã trả lời trong một chi tiết hơn chút ở đây:

"Erasing" in html5 canvas

Answer 4

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)"; 
} 

cả làm việc trong trường hợp của tôi!

Answer 5

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

Thực hiện chức năng là:

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)"; 
} 

Và bạn có thể quay về nguồn giao.

Answer 6

Mã cho tẩy minh bạch sử dụng globalCompositeOperation "điểm đến-out" và "nguồn-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(); 

    } 

Tôi đã sử dụng easeljs đây tuy nhiên mã này là độc lập với nó và có thể được tích hợp với bất kỳ javascript vẽ canvas html5 mã số