캔버스 : 채워진 사각형 위에 라인을 그립니다.

Question

여기에는 중간에 정사각형과 더하기 기호를 그려야하는 함수가 있습니다. 그 위에 마우스가 있으면 색상을 뒤집습니다. 마우스가 위에 있지 않으면 제대로 작동하지만 일단 채워지면 더하기 기호가 사라집니다. 나는 그것이 은폐되고있는 것으로 추정한다.

function drawAdd(cx, cy, btnW, btnH, mouse) 
{ 
    var getID = document.getElementById("canvas_1"); 
    var color = "black"; 
    var px = cx + btnW/2; 
    var py = cy + btnH/2; 

    if (getID.getContext) 
    { 
     var ctx = getID.getContext("2d"); 

     ctx.clearRect(cx, cy, btnW, btnH); 
     ctx.lineWidth = "10"; 
     ctx.fillStyle = "black"; 

     if(mouse) 
     { 
      ctx.fillRect(cx, cy, btnW, btnH); 
      color = "white"; 
     } 
     else 
     { 
      ctx.strokeRect(cx, cy, btnW, btnH); 
     } 

     ctx.beginPath(); 
     ctx.lineWidth = "20"; 
     ctx.fillStyle = color; 
     ctx.moveTo(px - 40, py); 
     ctx.lineTo(px + 40, py); 
     ctx.moveTo(px, py - 40); 
     ctx.lineTo(px, py + 40); 
     ctx.stroke(); 
     ctx.closePath(); 
    } 
} 

여기서 내가 뭘 잘못하고 있니?

Answer 1

ctx.fillStyle = color을 ctx.strokeStyle = color으로 바꾸려면 선 색상을 fillStyle이 아니라 strokeStyle로 설정해야합니다.

다음은 작동하는 JSFiddle입니다.