javascript - Pom Pom 程序不调整大小

Question

我创建了一个程序，使用 HTML5 canvas 绘制一个 pom pom，参数大小、x、y、蓬松度和颜色。 pom pom 是通过从中心出来的画线创建的，参数蓬松度决定了从中心出来的股数。我有一个确定 pom pom 大小的 slider ，当我调整 slider 并提交大小时，它应该会更改 pom pom 的大小。但是，当我缩小尺寸时，它并没有变小。这是代码:
HTML:

<canvas id="a"></canvas>
<div id="control">
  Size:<br>
  <input type="range" id="size" min="50" max="100" value="50">
  <button id="submit">Submit</button>
</div>

JS:

var b = document.getElementById("a");
var c = b.getContext("2d");
b.width = window.innerWidth;
b.height = window.innerHeight;
function pom_pom(size, x, y, fluffiness, col) {

  c.strokeStyle = col;
     setInterval(function() {
  for(var i = 0; i <= fluffiness; i++) {

    //c.clearRect(0, 0, b.width, b.height);
    c.moveTo(x, y);
    c.lineTo(x + Math.sin(i)*size, y + Math.cos(i)*size);
    c.stroke();

  }
        }, 100);
}
pom_pom(50, b.width/2, b.height/2, 50, "#00ff00");
function check_param() {
  var sizea = document.getElementById("size").value;
  c.clearRect(0, 0, b.width, b.height);
  console.log(sizea);
  pom_pom(sizea, b.width/2, b.height/2, 50, 0, "#00ff00");
}
document.getElementById("submit").addEventListener("click", function() {
  check_param();
});
document.getElementById("refresh").addEventListener("click", function() {
  c.clearRect(0, 0, b.width, b.height);
});

CSS:

#a {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
#control {
  z-index: 100;
}
input {
  -webkit-appearance: none;
  width: auto;
  height: 10px;
  background: linear-gradient(to left, purple, blue);
  border-radius: 10px;
}
input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  background: black;
  border-radius: 100%;
}
#col {
  width: 100px;
  height: 50px;
  border: 0;
  background: none;
}
input:focus {
  outline: none;
}

https://codepen.io/Rainy123/pen/qxOGKK?editors=0110

Answer 1

主要问题是您的代码中缺少 c.beginPath()。如果没有这个，clearRect() 将在您尝试声明它时不起作用。此外，您在代码中声明了 setInterval()，这是不必要的，并且会导致浏览器延迟。我假设您希望它能解决问题。我已经删除了提交和重置按钮，包括此 CodePen 中的其他冗余:https://codepen.io/KidProgram/pen/RQrBNm

尝试删除 c.beginPath() 看看会发生什么(提示:您将无法将其变小)