使用range滑块调整Canvas正方形大小，clearRect清除画布失效问题

我尝试通过range滑块控制Canvas上正方形的大小：上移滑块放大正方形，下移滑块缩小正方形。我使用clearRect方法清除画布，但它未正常工作——正方形可正常放大，但滑块下移时无法缩小。我仍在学习前端基础，若问题简单还请见谅，希望获得帮助。我查阅过相关解决方案，但大多涉及draw或stroke，与我的情况不符。

相关代码如下：

<h1>Inputs and Events - Color Picker and Range</h1>

<canvas id="c1">
</canvas>
<p>
<input type="button" value = "red" id="redColor" onclick="doRed()">  
<input type = "color" value="#6290C3" id = "col" onchange = "doColor()">
<input type = "range" id="ranger" min = "1" max = "100" value = "10" oninput = "doRange()">
</p> 

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);
  
}

解决方案 #

问题核心

doRange()函数里的clearRect调用错误：howBig是range滑块返回的字符串类型数值，它并没有width和length属性，导致clearRect(0,0,howBig.width,howBig.length)实际上是在清除一个0×0的区域，完全起不到清除画布的作用。之前放大的正方形会一直残留在画布上，所以滑块下移时看起来正方形没有缩小。

修复代码

修改doRange()函数，调整clearRect的参数并转换数值类型：

function doRange(){
  var canvas = document.getElementById("c1");
  var sizeInput = document.getElementById("ranger");
  var howBig = parseInt(sizeInput.value); // 将字符串转为数字，避免潜在问题
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除整个画布区域
  ctx.fillStyle="#F5BB00";
  ctx.fillRect(10,10,howBig,howBig);
}

补充说明

• canvas.width和canvas.height是Canvas元素的实际绘图区域尺寸，用这两个值可以确保清除整个画布的内容。
• 把sizeInput.value转为数字类型是良好的编程习惯，避免后续计算或绘制时出现字符串拼接之类的意外问题。

内容的提问来源于stack exchange，提问作者user23313046