Question

我的目标是使用数字输入（0-5），在HTML画布中填充5个方块。在0处，没有正方形被填充，1填充第一个正方形，在2处填充前两个，依此类推，直到填充所有正方形的数字5。我的想法是使用if / else语句设置每个方块的颜色。一世我已经尝试了几天，但我在网上找不到任何类似的例子。这是代码。谢谢！

<html>
 <head>
 <meta charset="utf-8"/>
 </head>
 <body onload="draw();">
   <table>
    <tr>
        <th>number</th>
        <th> <input type="number" id="EfPc" value="0" min="0" max="5"></th>
        <th><p id="EfPcCom1"></p></th>
        <th><p id="EfPcCom2"></p></th>
        <th><p id="EfPcCom3"></p></th>
        <th><p id="EfPcCom4"></p></th>
        <th><p id="EfPcCom5"></p></th>
    <tr>
   </table>
   <br>
   <br>
   <canvas id="wheel" width="500" height="500" style="border:1px solid #d3d3d3;"></canvas>

 <p id="description"></p>

   <script>

 function draw() {

    var wheel = document.getElementById('wheel');
      empty="white"
      full="blue"

      // function to transform the 1-5 in blue or white colour
 function description() {
    var pcStars =  document.getElementById("EfPc").value;

    var pc1;
        if (pcStars <= 0) {pc1 = "white";}
        else {pc1 = "blue";} 
document.getElementById("EfPcCom1").innerHTML = pc1;

    var pc2;
        if (pcStars <= 1) {pc2 = "white";}
        else {pc2 = "blue";} 
document.getElementById("EfPcCom2").innerHTML = pc2;

    var pc3;
        if (pcStars <= 2) {pc3 = "white";}
        else {pc3 = "blue";} 
document.getElementById("EfPcCom3").innerHTML = pc3;

    var pc4;
        if (pcStars <= 3) {pc4 = "white";}
        else {pc4 = "blue";} 
document.getElementById("EfPcCom4").innerHTML = pc4;

    var pc5;
        if (pcStars <= 4) {pc5 = "white";}
        else {pc5 = "blue";} 
document.getElementById("EfPcCom5").innerHTML = pc5;
   setTimeout(description); 
}
description();

    if (wheel.getContext) {
// at this stage I always fail to change the fill colour...
      var EfPc1 = wheel.getContext('2d');
            fill = full;
            EfPc1.beginPath();
            EfPc1.fillStyle=fill;
            EfPc1.moveTo(10, 10);
            EfPc1.lineTo(60, 10);
            EfPc1.lineTo(60, 60);
            EfPc1.lineTo(10, 60);
            EfPc1.fill()
            EfPc1.closePath();

            if (fill){
      EfPc1.fillStyle=fill;
   }
            }
      {
        var EfPcContainer = wheel.getContext('2d');
        EfPcContainer.strokeRect(10, 10, 50, 50)
        EfPcContainer.strokeRect(10, 60, 50, 50);
        EfPcContainer.strokeRect(10, 110, 50, 50);
        EfPcContainer.strokeRect(10, 160, 50, 50);
        EfPcContainer.strokeRect(10, 210, 50, 50);
      }
    } 


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

Answer 1

对于每个案例，您都不需要if语句。只需在while函数中使用draw循环简化整个过程，如果需要通过监听fillStyle事件来更改input，请在循环内部进行检查数字输入元素。

以下是一个例子：

＆＃13;

var input = document.getElementById('EfPc');
var desc = document.getElementsByClassName('EfPcCom');
var canvas = document.getElementById('wheel');
var ctx = canvas.getContext('2d');
var rectSize = 50;
var padding = 10;
var numOfSqrs = 5;

var onInput = function() {
  draw(this.value);
}

function drawRect(idx, fill) {
  ctx.fillStyle = fill;
  ctx.fillRect(10, (rectSize + padding) * idx, rectSize, rectSize);
}

function draw(value) {
  var i = 0;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  while( i < numOfSqrs ) {
    if ( value > i ) {
      drawRect(i, 'blue');
      desc[i].textContent = 'Blue';
    } else {
      drawRect(i, 'gray');
      desc[i].textContent = 'Gray';
    }
    i++;
  }
}

input.addEventListener('input', onInput);
draw(0);

＆＃13;

<table>
  <tr>
    <th>number</th>
    <th> <input type="number" id="EfPc" value="0" min="0" max="5"></th>
    <th><p class="EfPcCom"></p></th>
    <th><p class="EfPcCom"></p></th>
    <th><p class="EfPcCom"></p></th>
    <th><p class="EfPcCom"></p></th>
    <th><p class="EfPcCom"></p></th>
  <tr>
</table>
<br>
<br>
<canvas id="wheel" width="500" height="500" style="border:1px solid #d3d3d3;"></canvas>

<p id="description"></p>

＆＃13;

使用数字输入填充HTML 5画布

1 个答案: