使用 2 个滑块输入生成一个矩形 (Canvas)。在新输入上，删除矩形

Question

我的 HTML 中有 2 个滑块，可以让我获得他们想要在我的 Canvas 中做的所需的矩形宽度和高度。它工作正常，但我不知道如何删除我之前得到的一个矩形。我用一个布尔值尝试了它，但它变得一团糟，因为两个滑块都在同一个函数中，所以当我移动其中一个滑块时，我不能移动另一个。

这是我绘制矩形的函数：

function drawBackgroundBig(): void {
    if (canvasSet == false) {
        let newHeight: number = parseInt(heightSlider.value);
        // console.log(heightSlider.value);
        
        let newWidth: number = parseInt(widthSlider.value);
        // console.log(widthSlider.value);

        crc2.fillStyle = "red";
        crc2.fillRect(0, 0, newWidth, newHeight);
        crc2.stroke();
        crc2.save();
        newHeight = height;
        newWidth = width;
    }
    else {
        crc2.clearRect(0, 0, width, height);
        crc2.save();
    }
}

Answer 1

我只是建议你把 if 和 else 的内容颠倒一下。放 crc2.clearRect(0, 0, 宽度, 高度); crc2.save(); 在你的函数的开头，你应该得到你要找的东西。

let ctx=can.getContext("2d");
let prevWidth=0;
let prevHeight = 0;

let drawBackgroundBig = () => {

    ctx.clearRect(0, 0, prevWidth, prevHeight);
  ctx.save();
        
  let newHeight = parseInt(myRange1.value);
  // console.log(heightSlider.value);

  let newWidth = parseInt(myRange2.value);
  // console.log(widthSlider.value);

  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, newWidth, newHeight);
  ctx.stroke();
  ctx.save();
  
  prevWidth = newWidth;
  prevHeight = newHeight;
  
}
myRange1.onchange=()=>{drawBackgroundBig();}
myRange2.onchange=()=>{drawBackgroundBig();}

<canvas id="can" height=300 width=300 ></canvas>
<div>
  <input type="range" min="1" max="100" value="50" id="myRange1">
  <input type="range" min="1" max="100" value="50" id="myRange2">
</div>

使用 2 个滑块输入生成一个矩形 (Canvas)。在新输入上，删除矩形

Use 2 Slider inputs to generate a Rectangle (Canvas). On new Inputs, delete the Rectangle

javascript

canvas

rectangles

typescript