如何修复范围滑块调整Canvas矩形shadowBlur、shadowOffsetX/Y的问题？

核心错误点 #

• 绘制前未清空画布，旧图形叠加导致阴影变化无法直观显示
• 硬编码了阴影属性值，未使用滑块的实际输入值
• 错误操作滑块元素的样式（style.boxShadow、style.blur），这与Canvas阴影控制无关
• 滑块传递的参数未合理利用，数值缩放逻辑错误（偏移量不需要除以100）

修正后的完整代码 #

<!DOCTYPE html>
<html>
<body>
<canvas id="shadow" width="650" height="300" style="border:1px solid black;">
</canvas>

<input type="range" min="-30" max="30" value="15" id="mySliderX" oninput="myDraw()">
<input type="range" min="-30" max="30" value="15" id="mySliderY" oninput="myDraw()">
<input type="range" min="1" max="100" value="50" id="mySlider" oninput="myDraw()">

<script>
function myDraw() {
  // 获取画布和绘图上下文
  var canvas = document.getElementById("shadow");
  var context = canvas.getContext("2d");
  
  // 获取滑块数值并转为数字类型
  var offsetX = Number(document.getElementById("mySliderX").value);
  var offsetY = Number(document.getElementById("mySliderY").value);
  var blurVal = Number(document.getElementById("mySlider").value);
  
  // 清空画布（关键：每次绘制前清除旧内容）
  context.clearRect(0, 0, canvas.width, canvas.height);
  
  // 用滑块值设置阴影属性
  context.shadowBlur = blurVal;
  context.shadowOffsetX = offsetX;
  context.shadowOffsetY = offsetY;
  context.shadowColor = "lightgreen";
  
  // 设置填充色并绘制矩形
  context.fillStyle = "lightpink";
  context.fillRect(300, 25, 200, 200);
}

// 页面加载时执行初始绘制
myDraw();
</script>
</body>
</html>

关键修正说明 #

1. 清空画布：每次调用myDraw时用clearRect清除整个画布，避免旧图形叠加遮挡新效果
2. 绑定滑块数值：直接获取滑块的value并转为数字，赋值给Canvas上下文的阴影属性
3. 移除无效代码：删除操作滑块样式的错误代码，专注控制Canvas绘图逻辑
4. 简化调用逻辑：滑块的oninput直接触发myDraw()，函数内部统一获取所有滑块值
5. 补全页面结构：添加缺失的<body>开头标签，保证HTML结构合法
6. 初始绘制：页面加载时自动执行一次myDraw，显示初始阴影状态

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