重新填充画布的擦除区域

Question

我想填充图像中的颜色，使用下面的代码片段在画布上填充颜色。它在画布上成功填充颜色。现在，我正尝试使用此代码片段来擦除画布图像上的颜色，从而消除用户触摸时的填充颜色。其清除颜色&设置该触摸位置上的透明区域。现在我想用颜色重新填充用户触摸区域，但由于透明像素，它不允许我在该区域着色。所以有没有什么办法来填充颜色的像素或是否有任何其他方式来擦除画布图像的颜色？任何答复将不胜感激。

代码段用于对图像颜色填充画布

的

var ctx = canvas.getContext('2d'), 
    img = new Image; 
img.onload = draw; 
img.crossOrigin = 'anonymous'; 
img.src = "https://dl.dropboxusercontent.com/s/1alt1303g9zpemd/UFBxY.png"; 

    function draw(color) { 
     ctx.drawImage(img, 0, 0); 
    } 
    canvas.onclick = function(e){ 
     var rect = canvas.getBoundingClientRect(); 
     var x = e.clientX-rect.left, 
      y = e.clientY-rect.top; 

     ctx.globalCompositeOperation = 'source-atop'; 
     ctx.fillStyle = 'blue'; 
     ctx.beginPath(); 
     ctx.arc(x-5,y-5,10,0,2*Math.PI); 
     ctx.fill(); 

     } 

代码片段在图像擦除画布

(function() { 
    // Creates a new canvas element and appends it as a child 
    // to the parent element, and returns the reference to 
    // the newly created canvas element 


    function createCanvas(parent, width, height) { 
     var canvas = {}; 
     canvas.node = document.createElement('canvas'); 
     canvas.context = canvas.node.getContext('2d'); 
     canvas.node.width = width || 100; 
     canvas.node.height = height || 100; 
     parent.appendChild(canvas.node); 
     return canvas; 
    } 

    function init(container, width, height, fillColor) { 
     var canvas = createCanvas(container, width, height); 
     var ctx = canvas.context; 
     // define a custom fillCircle method 
     ctx.fillCircle = function(x, y, radius, fillColor) { 
      this.fillStyle = fillColor; 
      this.beginPath(); 
      this.moveTo(x, y); 
      this.arc(x, y, radius, 0, Math.PI * 2, false); 
      this.fill(); 
     }; 
     ctx.clearTo = function(fillColor) { 
      ctx.fillStyle = fillColor; 
      ctx.fillRect(0, 0, width, height); 
     }; 
     ctx.clearTo(fillColor || "#ddd"); 

     // bind mouse events 
     canvas.node.onmousemove = function(e) { 
      if (!canvas.isDrawing) { 
       return; 
      } 
      var x = e.pageX - this.offsetLeft; 
      var y = e.pageY - this.offsetTop; 
      var radius = 10; // or whatever 
      var fillColor = '#ff0000'; 
      ctx.globalCompositeOperation = 'destination-out'; 
      ctx.fillCircle(x, y, radius, fillColor); 
     }; 
     canvas.node.onmousedown = function(e) { 
      canvas.isDrawing = true; 
     }; 
     canvas.node.onmouseup = function(e) { 
      canvas.isDrawing = false; 
     }; 
    } 

    var container = document.getElementById('canvas'); 
    init(container, 531, 438, '#ddd'); 

})(); 

Answer 1

警告未经测试的代码的颜色！

// create a clipping region using your erasing rect's x,y,width,height 
context.save(); 
context.beginPath(); 
context.rect(erasingRectX,erasingRectY,erasingRectWidth,erasingRectHeight); 
context.clip(); 

// redraw the original image. 
// the image will be redrawn only into the erasing rects boundary 
context.drawImage(yourImage,0,0); 

// compositing: new pixels draw only where overlapping existing pixels 
context.globalCompositeOperation='source-in'; 

// fill with your new color 
// only the existing (clipped redrawn image) pixels will be colored 
context.fillStyle='red'; 
context.fillRect(0,0,canvas.width,canvas.height); 

// undo the clipping region 
context.restore();