캔버스 색상의 패스의 fillStyle을 변경할 때 색상이 실제로 변경되지 않습니다.

Question

경로의 fillStyle을 완전히 투명하게 변경하려고하지만 대신 혼합 색상을 사용합니다.

/***************************** 
ALL BELOW JUST SIMULATING CASE 
*****************************/ 
var c1 = document.getElementById("cool"); 
var ctx = c1.getContext("2d") 

var elem=[0,0,50,0,100,0]; 
var elem2=[50,0,50,50,50,100]; 

var i=1; 

var path = new Path2D(); 
path.moveTo(elem[i+1], elem[i+2]); 
path.lineTo(elem2[i+1], elem2[i+2]); 
path.lineTo(elem2[i-1], elem2[i]); 
path.lineTo(elem[i+1], elem[i+2]); 
path.closePath(); 

ctx.fillStyle = getRndColor(); 
ctx.strokeStyle = ctx.fillStyle; 
ctx.fill(path); 
ctx.stroke(path); 

//this function shouldn't have impact on problem, but i put it here just in case 
var getRndColor = function() { 
    var r = 255*Math.random()|0, 
     g = 255*Math.random()|0, 
     b = 255*Math.random()|0; 
    return 'rgb(' + r + ',' + g + ',' + b + ')'; 
} 

/***************************** 
ALL ABOVE JUST SIMULATING CASE 
*****************************/ 

var changeElement = function(path) { 
    ctx.fillStyle = "rgba(0,0,0,0)"; 
    ctx.strokeStyle = ctx.fillStyle; 
    ctx.fill(path); 
    ctx.stroke(path); 
    console.log(ctx.fillStyle); 
} 

changeElement(path); //if you try e.g. 50% opacity, you will see that color blends 

경로 fillStyle을 변경하는 방법은 무엇입니까? 캔버스의 사각형 영역이 아닌 영역을 지울 수 있습니까?

Answer 1

Okey, 여기 간단한 해결책이 있습니다. Kalido에게 큰 감사드립니다.

제 경우에는 globalCompositeOperation 값을 source-in으로 변경 한 다음 색상을 혼합하는 대신 색상과 불투명도를 변경할 수 있습니다.

이 값을 전체 컨텍스트로 변경 했으므로이 값을 사용하면 기본값으로 다시 설정하는 것이 좋습니다.

내 코드 예제 :

var changeElement = function(path) { 
    ctx.globalCompositeOperation = "source-in"; 
    ctx.fillStyle = "rgba(0,0,0,0)"; 
    ctx.strokeStyle = ctx.fillStyle; 
    ctx.fill(path); 
    ctx.stroke(path); 
    ctx.globalCompositeOperation = "source-over"; //setting back to default value to prevent odd behavior of other part of canvas. 
} 

changeElement(path);