使用“范围”输入创建方框后无法获取clearRect来清除画布

Question

我尝试使用滑块使方块在向上移动时变大，在向后移动时变小。我有一个clearRect来帮助解决这个问题，但它没有按应有的方式运行...我查看了代码，没有注意到任何错误 - 它创建的正方形很好，但当我移动时它并没有使它变小滑块向后

我仍在学习基础知识，所以如果这太微不足道，我深表歉意。将不胜感激的帮助！

我从这里经历了不同的解决方案，但所有解决方案都处理绘制或描边，但我的情况并非如此

我目前正在使用代码笔，因此在此处链接我的代码 -

https://codepen.io/thedailyrush/pen/gOEogQE

画布有 3 个输入 - 下面的函数几乎是它们所做的全部 - doRange() 函数是我遇到问题的地方

function doRed(){
  var canvas = document.getElementById("c1");
  canvas.style.backgroundColor = "#E26D5A";
}
function doColor(){
  var canvas = document.getElementById("c1");
  var input = document.getElementById("col");
  var finalColor = input.value;
  canvas.style.backgroundColor = finalColor;
}

function doRange(){
  var canvas = document.getElementById("c1");
  var sizeInput = document.getElementById("ranger");
  var howBig =sizeInput.value;
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0,0,howBig.width,howBig.length);
  ctx.fillStyle="#F5BB00";
  ctx.fillRect(10,10,howBig,howBig);
  
}

Answer 1

问题出在你的clearRect中

这里是更新的代码

ctx.clearRect(0,0,canvas.width,canvas.height);