在 HTML5 中部分填充矩形

Partially filling a rectangle in HTML5

本文关键字：填充矩形 中部 HTML5      更新时间：2023-09-26

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

问题是我以前从未编写过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);

虽然对画布进行编程是一项很棒的技能，但像这样的动画可以完全在 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>

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

但是，您可以绘制一个只有描边而没有填充的矩形，并在其顶部绘制另一个矩形，用作第一个矩形的填充。您可以根据需要调整其大小。

编辑：看起来，你可以用渐变来实现这一点，但是我真的不知道哪个是更好的解决方案。

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

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();
<canvas id="myCanvas" />

相关文章：