如何在HTML畫布上繪製重疊內容時重置透明度？

Question

我在畫布上繪製半透明顏色（例如rgba(255,0,0,0.5)）。當我再次繪製相同的區域時，透明度值似乎相加，導致不透明的顏色。有沒有辦法保持源的透明度值（我用來繪製半透明顏色）？

Answer 1

使用alpha = 1繪製到屏幕外畫布。然後，將屏幕畫布呈現在顯示畫布上，並將ctx.globalAlpha設置爲您希望的值。這樣，你可以繪製，直到太陽下山，而不需要添加任何東西到阿爾法。如果需要繪製，在繪製後也很容易。

附記

如果已經包括在圖像中的其他內容，你將不得不繼續其在另一層，以及因爲這種方法依賴屏幕上的畫布上被複位到期望的起始狀態爲每個更新。在這段代碼中，這只是一個clearRect調用。但也可以用另一個現有圖層或其組合替換。

瀏覽器可以很容易地處理很多屏幕畫布，我剛剛完成了一個有60個全屏幕帆布堆疊在一起的作業（注意你的GPU需要RAM來存放圖像或它太慢）和Chrome甚至沒有眨眼。 Firefox和IE的功能一樣。

UPDATE

我添加了一個片斷來證明我的意思。底部有關代碼的評論詳情。只是一個簡單的繪圖界面。

// get canvas set up mouse and do the other things 
 
var canvas = document.getElementById("canV"); 
 
var ctx = canvas.getContext("2d"); 
 
var w = canvas.width; 
 
var h = canvas.height; 
 
var mouse = { 
 
    x:0, 
 
    y:0, 
 
    buttonLastRaw:0, // user modified value 
 
    buttonRaw:0, 
 
    over:false, 
 
}; 
 
function mouseMove(event){ 
 
    mouse.x = event.offsetX; mouse.y = event.offsetY; 
 
    if(mouse.x === undefined){ mouse.x = event.clientX; mouse.y = event.clientY;}  
 
    if(event.type === "mousedown"){ mouse.buttonRaw = 1; 
 
    }else if(event.type === "mouseup"){mouse.buttonRaw = 0; 
 
    }else if(event.type === "mouseout"){ mouse.buttonRaw = 0; mouse.over = false; 
 
    }else if(event.type === "mouseover"){ mouse.over = true; } 
 
    event.preventDefault(); 
 
} 
 

 
canvas.addEventListener('mousemove',mouseMove); 
 
canvas.addEventListener('mousedown',mouseMove); 
 
canvas.addEventListener('mouseup' ,mouseMove); 
 
canvas.addEventListener('mouseout' ,mouseMove); 
 
canvas.addEventListener('mouseover' ,mouseMove); 
 
canvas.addEventListener("contextmenu", function(e){  canvas.preventDefault();}, false); 
 

 
// create off screen layer that we will draw to 
 
var layer1 = document.createElement("canvas"); 
 
layer1.width = w; // same size as the onscreen canvas 
 
layer1.height = h; 
 
layer1.ctx = layer1.getContext("2d"); 
 
// set up drawing settings 
 
layer1.ctx.lineCap = "round"; 
 
layer1.ctx.lineJoin = "round"; 
 
layer1.ctx.lineWidth = 16; 
 
layer1.ctx.globalAlpha = 1; // draw to this layer with alpha set to 1; 
 

 
// set up onscreen canvas 
 
ctx.globalAlpha = 1; 
 
ctx.textAlign = "center"; 
 
ctx.textBaseline = "middle"; 
 
ctx.font = "24px Arial black"; 
 
var instructions = true; 
 

 
// colours to show that different layer are overwriting each other 
 
var colours = "#F00,#FF0,#0F0,#0FF,#00F,#F0F".split(","); 
 
var currentCol = 0; 
 

 
// update on animation frame 
 
function update(){ 
 
    ctx.clearRect(0,0,w,h); // clear onscreen 
 
    var c = layer1.ctx;  // short cut to the later1 context 
 
    if(mouse.buttonRaw){ // if mouse down 
 
     if(mouse.lastx === undefined){ // is this start of drawing stroke 
 
      mouse.lastx = mouse.x; // set up drawing stroke 
 
      mouse.lasty = mouse.y; 
 
\t   c.strokeStyle = colours[currentCol % colours.length]; 
 
      currentCol += 1; 
 
      instructions = false; // tuen of the instructions as they have worked it out 
 
      ctx.globalAlpha = 0.6; // should do this near layering but lasy 
 
     } 
 
     // draw the dragged stroke to the offscreen layer 
 
     c.beginPath(); 
 
     c.moveTo(mouse.lastx,mouse.lasty); 
 
     c.lineTo(mouse.x,mouse.y); 
 
     c.stroke(); 
 
     mouse.lastx = mouse.x; 
 
     mouse.lasty = mouse.y;   
 
    }else{ // if the mouse button up show drawing brush and instructions if 
 
      // nothing has happened yet 
 
     mouse.lastx = undefined; // using this as a semaphore for drag start 
 
     ctx.fillStyle = colours[currentCol%colours.length]; 
 
     ctx.globalAlpha = 0.6; // the brush will compound the alpha 
 
            // this can be avoided by drawing it onto 
 
            // the offscreen layer, but you will need 
 
            // another layer or some temp store to 
 
            // protect the offscreen layer. Again I am 
 
            // to lazy to implement that right now. 
 
     ctx.beginPath(); 
 
     ctx.arc(mouse.x,mouse.y,8,0,Math.PI*2); 
 
     ctx.fill(); 
 
     if(instructions){   // show instructions if needed 
 
      ctx.fillStyle = "blue"; 
 
      ctx.globalAlpha = 1; 
 
      ctx.fillText("Click drag mouse to draw",250,60); 
 
     } 
 
    } 
 
    
 
    // draw the offscreen layer onto the onscreen canvas at the alpha wanted 
 
    ctx.drawImage(layer1,0,0); 
 
    requestAnimationFrame(update); // do it all again. 
 
} 
 
mouse.lastx; // needed to draw lines. 
 
mouse.lasty; 
 
update()

body { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAlUlEQVRYR+2WsQ0EIQwEbXpAopbrAZESUhQ1AAkBXVEDAb6jBRP8B0s+yJpklnvvstYizRMRyjmTtVaD096buNYqzjnVB3NOaq3RGEPFhxBwAAzAAAzAAAz8gYFSijCzqmYH+ngyxqj4k3N+nkduep5Sops9wV+T5abnMUa62RM4AAZgAAZgAAZ+b8B7Lzc9PzW82RMvg0g+JLdy9xIAAAAASUVORK5CYII='); 
 

 

 
    background-size: 32px 32px; 
 
    background-repeat: repeat; 
 
} 
 
.canC { width:500px; height:600px;}

<canvas class="canC" id="canV" width=500 height=600></canvas>