Javascript, HTML5 (canvas) progressbar with update

Question

我正在寻找在 html5 Canvas 中制作进度条(在我的例子中是游戏的生命条)的最佳方法。

不知道是用javascript加dom元素好，还是直接在canvas上画这个bar。

我需要一个更新函数，例如 myBar.updateValue(40)，当然我需要在不刷新所有页面或所有 Canvas 的情况下显示新栏。

你知道这样的事情吗？现有脚本？谢谢!

Answer 1

在 HTML/CSS 中非常简单:

<style>
    #progress-holder{width:400px;height:20px;background:grey}
    #progress{width:0;height:100%;background:black}
</style>
<div id="progress-holder">
    <div id="progress"></div>
</div>
<script>
    var progress = document.getElementById('progress');
    function updateValue(perc) {
        progress.style.width = perc+'%';
    }
    updateValue(40);
</script>

演示:http://jsbin.com/EGAzAZEK/1/edit

并使用 CSS 制作动画:http://jsbin.com/EGAzAZEK/3/edit