为什么这个 HTML 表格让我增加表格中的数字，而不是减少它们？

Question

我写了一个 HTML 页面，其中页眉有一个表单，您可以在其中输入三个数字。每个数字在圆环图中绘制一个环。如果输入零，则不会绘制环。如果输入 50，则会绘制半个环。如果输入 100，则会绘制一个完整的环。有绿色外圈，橙色中圈，蓝色内圈。

当我从 0 增加表单中的数字时，通过键入或单击增加输入字段中数字的按钮，然后单击 "Update rings"，一切正常。但是，当我尝试通过降低输入字段中的数字来缩短任何环时，单击 "Update rings" 不会使环变短。简而言之，我可以增加百分比值，但不能减少它们。

代码如下：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body{
    margin: 0px;
    padding: 0px;
}
</style>
<form id="frm1" action="/action_page.php">
  Outer Ring Completion %: <input type="number" name="apercent" value="0" min="0" max="100">
  Middle Ring Completion %: <input type="number" name="bpercent" value="0" min="0" max="100">
  Inner Ring Completion %: <input type="number" name="cpercent" value="0" min="0" max="100">
</form>
<br>
<button onclick="ChangeNums()">Update rings</button>
<br>
</head>
<body onload="ChangeNums()">
<canvas id="myCanvas" width="600" height="600"></canvas>
<script>
var outerval;
var middleval;
var innerval;

function ChangeNums() {
    var x = document.getElementById("frm1");
    outerval = x.apercent.value;
    middleval = x.bpercent.value;
    innerval = x.cpercent.value;
    RenderChart()
};

function RenderChart() {

      //Outermost line
      var canvas = document.getElementById('myCanvas');
      var outerline = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 270;
      var startAngle = 1.5 * Math.PI;
      var endAngle = ((outerval - 25) / 50) * Math.PI;
      //var endAngle = 0.25 * Math.PI;
      var counterClockwise = false;

      outerline.beginPath();
      outerline.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      outerline.lineWidth = 30;

      // line color
      outerline.strokeStyle = 'green';
      if(outerval != 0){
      outerline.stroke();
      }

      //Middle line
      var middleline = canvas.getContext('2d');
      var radiusB = 240;
      var startAngleB = 1.5 * Math.PI;
      var endAngleB = ((middleval - 25) / 50) * Math.PI;
      //var endAngleB = 0  * Math.PI;
      var counterClockwiseB = false;

      middleline.beginPath();
      middleline.arc(x, y, radiusB, startAngleB, endAngleB, counterClockwiseB);
      middleline.lineWidth = 30;

      // line color
      middleline.strokeStyle = 'orange';
      if(middleval != 0){
      middleline.stroke();
      }
      //Inner line
      var innerline = canvas.getContext('2d');
      var radiusC = 210;
      var startAngleC = 1.5 * Math.PI;
      var endAngleC = ((innerval - 25) / 50) * Math.PI;
      //var endAngleC = 0.5 * Math.PI;
      var counterClockwiseC = false;

      innerline.beginPath();
      innerline.arc(x, y, radiusC, startAngleC, endAngleC, counterClockwiseC);
      innerline.lineWidth = 30;

      // line color
      innerline.strokeStyle = 'blue';
      if(innerval != 0){
      innerline.stroke();
      }

}
</script>
</body>
</html>

Answer 1

在重新渲染之前清除canvas是最安全的处理方式。该值正在更改，但不会自动清除 canvas.

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

在你

之前

outerline.beginPath();

会完成任务

为什么这个 HTML 表格让我增加表格中的数字，而不是减少它们？

Why will this HTML form let me increase numbers in a form, but not decrease them?

html

javascript

css

forms

donut-chart