数値入力でHTML 5キャンバスを塗りつぶす

私の目標は、数値入力（0-5）を使用して、HTMLキャンバスで5つの四角形を埋めることです。 0には、四角形は塗りつぶされません.1つは最初の四角形が塗りつぶされ、2つ目は最初の2つのようになります。私の考えは、各四角形の色を設定するif/elseステートメントを使用することです。 I 私は数日間試してみましたが、Web上で同じような例は見つかりません。コードは次のとおりです。ありがとう！数値入力でHTML 5キャンバスを塗りつぶす

<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>

出典

2017-06-27 Simone Pedrini

あなたが行く：https://jsfiddle.net/khrismuc/ccdwdzs3/ここ

は一例です –

すべてのケースに対してifステートメントは必要ありません。 draw関数内にwhileループを使用して全体を単純化し、数値入力要素のinputイベントをリッスンしてfillStyleを変更する必要がある場合は、ループをチェックしてください。

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);

<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>

ここ

出典

2017-06-27 09:42:24 DavidDomain

数値入力でHTML 5キャンバスを塗りつぶす

答えて

関連する問題