如何使HTML5画布进度栏从下至上而不是从上至下填充？

Question

I am using this example to build my own progress bar that will keep track of the players fuel level in a game I am making.

HTML

<h1>Canvas Progress Bar Test</h1>
<form>
  <ul>
    <li>
      <input type="radio" name="direction" id="vertical" value="vertical" checked />
      <label for="vertical">Vertical</label>
      <input type="radio" name="direction" id="horizontal" value="horizontal" />
      <label for="horizontal">Horizontal</label>
    </li>

    <li>
      <label for="width">Width</label>
      <input type="number" id="width" value="20" />
    </li>
    <li>
      <label for="height">Height</label>
      <input id="height" type="number" value="200" />
    </li>
    <li>
      <label for="max">Max Value</label>
      <input id="max" type="number" value="100" />
    </li>
    <li>
      <label for="val">Value</label>
      <input id="val" type="number" value="20" />
    </li>
    <li>
      <input id="submit" type="submit" />
    </li>
  </ul>
</form>

<canvas id="canvas" width="500" height="500"><canvas>

JS

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

function drawScrollbar () {
  var width = parseInt($('#width').val()),
    height = parseInt($('#height').val()),
    max = parseInt($('#max').val()),
    val = Math.min(Math.max(parseInt(parseInt($('#val').val())), 0), max),
    direction = $('input[name="direction"]:checked').val();

  // Draw the background
  ctx.fillStyle = '#000';
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(0, 0, width, height);

  // Draw the fill
  ctx.fillStyle = '#777';
  var fillVal = Math.min(Math.max(val / max, 0), 1);
  if (direction === 'vertical') {
    ctx.fillRect(0, 0, width, fillVal * height);
  } else {
    ctx.fillRect(0, 0, fillVal * width, height);
  }
}

drawScrollbar();

$('#submit').click(function (e) {
  e.preventDefault();
  drawScrollbar();
});

CSS

h1 {
  font-size: 20px;
  margin: 5px 5px 10px;
}

input[type="number"], li {
  display: block;
  margin-bottom: 10px;
}

form {
  margin: 5px;
}

canvas {
  padding: 20px;
}

The problem

I need it to fill from the bottom going up instead of the top going down. How can I achieve this? I've tried rotating the canvas but I can't seem to get it to work.

Answer 1

If i've understood your question, what you need to do is to start drawing the rectangle at a lower (that is, larger) y-value. More specifically at height - (fillVal * height)

Here's your method with the adjustment

...
// Draw the fill
  ctx.fillStyle = '#777';
  var fillVal = Math.min(Math.max(val / max, 0), 1);
  if (direction === 'vertical') {
    ctx.fillRect(0, height - (fillVal * height), width, fillVal * height);
  } else {
    ctx.fillRect(0, 0, fillVal * width, height);
  }
}
...

and a little fiddle

Answer 2

This is just an alternative way to do it in addition to Morgan's answer, for the record. It will allow you to fill as you would from top to bottom, but it will render from the bottom to top:

ctx.setTransform(1, 0, 0, -1, 0, height);     // reverses the coordinate system's y-axis
ctx.fillRect(0, 0, width, fillVal * height);  // fill as you would top to bottom
ctx.setTransform(1, 0, 0, 1, 0, 0);           // reset transforms

Forked fiddle