Question

我有一个画布，我想绘制多个矩形（不同大小）。这些矩形必须随着时间的推移被填充或清空，无论是自动填充还是清空，或者来自用户的输入。

问题是我之前从未编写过HTML5，也不知道如何部分填充矩形或增加填充（通过类似rectangle.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

虽然编写画布是一项非常棒的技巧，但使用transitions可以在CSS中完成这样的动画：

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>

Answer 2

我不认为使用一个矩形是可能的，因为它只能用单一颜色或渐变填充 - 并且没有部分填充的选项。

但是，您可以绘制一个只有笔划而没有填充的矩形，另一个在其上面，它可以作为第一个矩形的填充。您可以根据需要调整大小。

编辑：好吧，你可以用渐变来实现这一点，但我无法确定哪个是更好的解决方案。

Answer 3

您可以使用渐变来获得部分填充的效果，例如填充50％的矩形。

＆＃13;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var rec = ctx.rect(20, 20, 150, 100);
var grd = ctx.createLinearGradient(0, 0, 190, 0);
grd.addColorStop(0, "black");
grd.addColorStop(0.5, "black");
grd.addColorStop(0.5, "white");
grd.addColorStop(1, "white");

ctx.fillStyle = grd;
ctx.fill();

ctx.strokeStyle = 'black';
ctx.stroke();

＆＃13;

<canvas id="myCanvas" />

＆＃13;

在HTML5中部分填充矩形

3 个答案: