Question

我创建了一个程序，使用HTML5画布绘制一个pom pom，参数大小，x，y，蓬松度和颜色。通过绘制从中心出来的线条来创建pom pom，并且参数蓬松度决定了从中心出来的线束数量。我有一个滑块确定了pom pom的大小，当我调整滑块并提交大小时，它应该改变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()以查看会发生什么（提示：您将无法将其缩小）

Pom Pom计划没有调整大小

1 个答案: