javascript - HTML5 中部分填充矩形

Question

我有一个 Canvas ，我想在其中绘制多个矩形(不同大小)。随着时间的推移，这些矩形必须被填充或清空，无论是自动填充还是通过用户输入。

问题是我以前从未编写过 HTML5，并且不知道如何部分填充矩形或增加填充(通过矩形.backgroundHeight++ 之类的东西)。

这是我的代码:

<canvas id="myCanvas" height="1000" width="1000" />

<script>
window.addEventListener('load', function () {
var ctx = document.getElementById('myCanvas').getContext('2d');

var interval = setInterval(function() {

  return function () {
    // Draw large fuel tanks
    var fuelA = ctx.rect(150, 60, 110, 130);
    var fuelB = ctx.rect(600, 60, 110, 130);

    // Draw small fuel tanks
    var fuelC = ctx.rect(40, 300, 60, 130);
    var fuelD = ctx.rect(300, 300, 60, 130);
    var fuelE = ctx.rect(500, 300, 60, 130);
    var fuelF = ctx.rect(750, 300, 60, 130);


    ctx.stroke();
  };
}(), 1000/25);
}, false);

Answer 1

虽然对 Canvas 进行编程是一项很棒的技能，但像这样的动画可以完全在 CSS 中完成，使用 transitions :

var liquid= document.querySelector('.liquid');

document.querySelector('#bfill').onclick= function() {
  liquid.style.height = '100%';
};

document.querySelector('#bempty').onclick= function() {
  liquid.style.height = '0%';
};

.tank {
  position: absolute;
  left: 20px;
  top: 40px;
  height: 100px;
  width: 50px;
  border: 1px solid black;
}

.liquid {
  transition: height 3s;
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 20%;
  width: 100%;
  background: blue;
}

<button id="bfill">Fill the tank</button>
<button id="bempty">Empty the tank</button>
<div class="tank">
  <div class="liquid"></div>
</div>