部分填充 HTML5 中的矩形答案

【问题标题】：Partially filling a rectangle in HTML5部分填充 HTML5 中的矩形
【发布时间】：2014-12-23 11:45:32
【问题描述】：

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

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

【问题讨论】：

填充参考：html5canvastutorials.com/tutorials/… 和部分填充.. 我不知道，但也许你可以使用渐变，请参阅html5canvastutorials.com/tutorials/… .. 尝试将 var grad 声明更改为 var grd = context.createLinearGradient(250, 250, canvas.width, canvas.height); （注意第一个 2 参数中的 cange）

标签： javascript html rectangles

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

但是，您可以绘制一个只有笔触而没有填充的矩形，并在其顶部绘制另一个，作为第一个矩形的填充。你可以随意调整它的大小。

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

【讨论】：

我已经尝试过你的方法，它几乎可以工作，但几秒钟后矩形似乎变大了。我把我的代码放在了小提琴中：jsfiddle.net/jvep7613/1（它没有出现，但我修好了）
要让它在 jsFiddle 中工作：在 Frameworks an Extensions 下，将第二个选择框更改为 No wrap - in head。
@RickHitchcock 我通过移除窗口负载来修复它。现在可以正常显示了。
是的，也可以。
它会增长，因为它陷入了无限循环。您应该根据另一个框（没有填充的框）限制colorAY1 和colorAY2 的值。

【解决方案3】：

您可以使用渐变来获得部分填充的效果，例如将矩形填充 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();

&lt;canvas id="myCanvas" /&gt;

【讨论】：