可以操纵HTML5 Canvas CLearRect（）使其看起来像箭头吗？

Question

我一直在试验帆布（初学者），我目前正在制作一些标志。 我想知道是否可以操纵ctx.clearRect（在蓝色的“One Way”标志上）使它看起来像一个朝北的箭头？如果没有，我该怎么做到这一点？我尝试在蓝色方块内放置另一个白色方块，然而，它只是躲在原始方块后面。谢谢。

var canvas = document.querySelector("#myCanvas");
var ctx = canvas.getContext("2d");

ctx.save();			// save previous display state
//  set drawing properties for the sign
ctx.lineWidth = 32;	       // nice wide line		
ctx.lineJoin = "round";	   // rounded corners
ctx.strokeStyle = "red";
ctx.fillStyle = "red";

// create octagon linear path
ctx.beginPath();
ctx.moveTo(200, 100);
ctx.lineTo(350, 100);
ctx.lineTo(450, 200);
ctx.lineTo(450, 350);
ctx.lineTo(350, 450);
ctx.lineTo(200, 450);
ctx.lineTo(100, 350);
ctx.lineTo(100, 200);
ctx.closePath();

// fill the sign and draw wide red lines
ctx.fill();
ctx.stroke();	

// draw narrower white lines -- these will display on top of the wide red lines and make the red lines
// look like the outside edge -- a nice trick!
ctx.strokeStyle = "white";
ctx.lineWidth = 10;
ctx.stroke();

// draw STOP text
ctx.fillStyle  = "white";
ctx.font = "bold 100px Arial";
ctx.fillText( "STOP" ,140, 310);
ctx.restore();		// restore previous display state
   
     
//  set drawing properties for the sign
ctx.lineWidth = 32;	       // nice wide line		
ctx.lineJoin = "round";	   // rounded corners
ctx.strokeStyle = "#FF0000";
ctx.fillStyle = "#FF0000";

// create new circle
ctx.beginPath();
ctx.translate(440, -20);
            
ctx.arc(300, 300, 220, 0, 2 * Math.PI);  

// fill the sign 
ctx.fill();
//used white outline to narrow the circle radius further
ctx.strokeStyle = "white";

ctx.stroke();

// draw Do Not Enter text
ctx.fillStyle  = "white";
ctx.font = "bold 50px Arial";
ctx.fillText( "Do Not" ,210, 210);
ctx.fillText( "Enter" ,230, 400);  
ctx.clearRect(180, 270, 250, 50); 
ctx.restore();		// restore display   
            
            
var canvas = document.querySelector("#myCanvas2");
var context = canvas.getContext("2d");
            
 ctx.save();	// save previous display state
//  set drawing properties for the sign
ctx.lineWidth = 25;	       		
ctx.lineJoin = "round";	   // rounded corners
ctx.strokeStyle = "#0099ff";
ctx.fillStyle = "#0099ff";

// create square linear path
ctx.beginPath();
ctx.translate(-250, 450);

ctx.moveTo(190, 100);
ctx.lineTo(350, 100);
ctx.lineTo(450, 100)  
ctx.lineTo(450,450); 
ctx.lineTo(190,450);          

ctx.closePath();
            
 
//Draw White lines
ctx.fill();
ctx.stroke();	

// draw narrower white lines -- these will display on top of the wide red lines and make the red lines
// look like the outside edge -- a nice trick!
ctx.strokeStyle = "white";
ctx.lineWidth = 10;
            
ctx.stroke();
ctx.clearRect(290, 150, 80, 250);
// draw STOP text
ctx.fillStyle  = "#0099ff";
ctx.font = "bold 60px Arial";
ctx.fillText( "ONE WAY" ,175, 550);
ctx.restore();	

<canvas id = "myCanvas" width = "1000" height = "1000" >Load Error</canvas>
   
<canvas id = "myCanvas2" width = "500" height = "500" >Load Error</canvas>
       
        
var canvas = document.querySelector("#myCanvas");
var ctx = canvas.getContext("2d");

Answer 1

您可以像在其他地方一样绘制多边形。

更换：

ctx.clearRect(290, 150, 80, 250);

有：

// Arrow-up shape:
ctx.beginPath();     
ctx.moveTo(320, 150);
ctx.lineTo(420, 250);
ctx.lineTo(360, 250);
ctx.lineTo(360, 400);
ctx.lineTo(280, 400); 
ctx.lineTo(280, 250);
ctx.lineTo(220, 250);
ctx.closePath();

ctx.fillStyle = "white";
ctx.stroke();
ctx.fill();

Answer 2

虽然另一个答案适用于您的情况，但在某些情况下，某人可能希望清除路径而不是仅填充它 - 为此，可以使用globalCompositionOperation属性：

ctx.beginPath();     
//draw path to clear here

ctx.globalCompositionOperation = "destination-out";
ctx.fill();
ctx.globalCompositionOperation = "source-over";

这将告诉浏览器清除画布上的指定路径而不是填充它。在操作之后将此属性设置为source-over将恢复默认绘制模式。