javascript - HTML5/Javascript Canvas Fill不会保持填充状态，只会闪烁

Question

[在此处输入链接说明] [1]

 [1]: http://codepen.io/aliu927/full/JExbqb/

因此，我要在此处进行的操作是在实时预览期间输入我的值时，将画布代码保持在Adobe括号中。它只是闪烁而已，我想让它保持填充状态。我在这里做错了什么？我也知道我不应该在if / else语句中放一个函数代码（我不确定如果我错了，但是如果我有错，请随时纠正我）。我是一名初学者，尝试制作一些我认为很酷的东西。

编辑：将码笔置于调试模式时，您将明白我的意思。

Answer 1

画布上的正方形无法保持填充的原因是按钮的类型为“ submit”。这导致正方形被短暂填充，然后触发页面重新加载。一个简单的解决方法是将按钮更改为type =“ button”。

但是，由于fillBox方法被多次定义，因此仍然不能达到预期的效果。移出fillBox函数，以便对其进行一次定义，然后对元素ID和颜色值进行参数化。

http://codepen.io/kobusp/pen/ygZbLq

HTML：

<div id="wrap">


  <canvas id="green"></canvas>

  <canvas id="yellow"></canvas>

  <canvas id="red"></canvas>

  <div id="gray"></div>


</div>

<form id="fm">
  <b>Input value from 1-12</b> <br>
  <input type="text" name="value" id="input_value">
  </br>
  <input type="button" name="Submit" value="Submit" onclick="processData()">
</form>

JavaScript：

function trim(str) {
  return str.replace(/^\s+|\s+$/g, '');
}

// Function equals process datat
// Values 1-4 = Red
// Values 5-9 = Yellow
// Values 10-12 = Green

function fillBox(element, color) {
  var c = document.getElementById(element);
  var ctx = c.getContext('2d');
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, c.width, c.height);
  ctx.fill();
}

function processData() {

  var value_element = document.getElementById('input_value');

  var v = trim(value_element.value);

  if (v > 12 || v < 1) {

    alert('Failed');

  } else if (v <= 4) {

    fillBox('red', 'rgb(255,0,0)');

  } else if (v <= 9) {

    fillBox('yellow', 'rgb(255,255,0)');

  } else if (v <= 12) {

    fillBox('green', 'rgb(0,255,0)');

  }

}