Частичное заполнение прямоугольника в HTML5

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

Я не думаю, что это возможно с помощью одного прямоугольника, так как она может быть заполнена только одним цветом или градиентом - и есть нет опции для частичного заполнения.

Однако вы можете нарисовать прямоугольник с только штрихами и без заполнения, а другой поверх него, который действует как заливка для первого прямоугольника. Вы можете сделать это так, как хотите.

Редактировать: Ну, похоже, вы можете добиться этого с помощью градиентов, однако я не могу сказать, что является лучшим решением.

Answer 2

Вы можете использовать градиент, чтобы получить эффект частичного заполнения, например, заполнение прямоугольника на 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" />

Answer 3

При программировании холст является большим мастерством, чтобы иметь, анимация, как это может быть сделано полностью в 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>