如何清除矩形边框？ （JS，Canvas）

Posted 2021-03-28

我试图只清除strokeRect（）并将内容保留在该矩形中。在此示例中，如何清除绿色矩形而不影响红色矩形？

 var cut = [50, 70, 100, 100]
 var cut1 = [60, 85, 60, 60]
 var c = document.getElementById("canvas");
 var ctx = c.getContext("2d");
 ctx.beginPath();
 ctx.rect(cut[0], cut[1], cut[2], cut[3]);
 ctx.lineWidth = 3;
 ctx.strokeStyle = 'green';
 ctx.stroke();
 ctx.closePath();
 
 ctx.beginPath();
 ctx.rect(cut1[0], cut1[1], cut1[2], cut1[3]);
 ctx.lineWidth = 3;
 ctx.strokeStyle = 'red';
 ctx.stroke();
 ctx.closePath();

<canvas id="canvas" width=400px height=200px></canvas>

无法弄清楚如何..提前感谢！

答案

您需要清除画布并再次绘制红色矩形。

var c = document.getElementById("canvas");
 c.width=400;
 c.height=200;
 var ctx = c.getContext("2d");

 var cut = [50, 70, 100, 100]
 var cut1 = [60, 85, 60, 60]
 
 function drawRectangle(cut,fill){
 ctx.beginPath();
 ctx.rect(cut[0], cut[1], cut[2], cut[3]);
 ctx.lineWidth = 3;
 ctx.strokeStyle = fill;
 ctx.stroke();
 ctx.closePath();
 }

drawRectangle(cut,"green");
drawRectangle(cut1,"red");



clear.addEventListener("click",()=>{
ctx.clearRect(0,0, c.width, c.height);
drawRectangle(cut1,"red");
});

canvas{display:block;}

<button id="clear">clear</button>
<canvas id="canvas" width=400px height=200px></canvas>

另一答案

在你的情况下，清晰和重绘是你真正需要的，但只是为了完整性，清除任何形状，你可以使用compositing operations。

通过将合成模式设置为目标输出，通常应由图形填充的所有像素实际上将呈现为透明。

所以要做一个简单的clear-stroke-rect：

var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 80, 80);

// clear
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = 5;
ctx.strokeRect(40,40,30,30);

// set back to 'normal'
ctx.globalCompositeOperation = 'source-over';

<canvas id="canvas"></canvas>

以上是关于如何清除矩形边框？ （JS，Canvas）的主要内容，如果未能解决你的问题，请参考以下文章

html5中canvas通过js绘制圆角矩形

h5 Canvas矩形的绘制

canvas绘制矩形

Canvas 使用

canvas学习api

怎样使用canvas绘制一个矩形