Javascript、HTML5（画布）进度条和更新

我正在寻找在html5画布上制作进度条（在我的例子中，它是游戏的生命条）的最佳方法

我不知道是否最好使用javascript和dom元素，或者直接在画布中绘制此条

我需要一个更新函数，例如

myBar.updateValue（40）

，当然，我需要在不刷新所有页面或画布的情况下显示新的工具栏

---

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

使用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>

#进度夹{宽度：400px；高度：20px；背景：灰色}
#进度{宽度：0；高度：100%；背景：黑色}
var progress=document.getElementById（'progress'）；
函数updateValue（perc）{
progress.style.width=perc+'%'；
}
更新值（40）；

演示：

并使用CSS制作动画：

HTML:

<div class='progress'>
    <div class='progress-bar' data-width='//Enter a percent value here'>
        <div class='progress-bar-text'>
            Progress: <span class='data-percent'>//This is auto-generated by the script</span>
        </div>
    </div>
</div>

jQuery：

$('.progress-bar').each(function (){    
    var datawidth = $(this).attr('data-width');

    $(this).find("span.data-percent").html(datawidth + "%");

    $(this).animate({
        width: datawidth + "%"
    }, 800);
});

HTML

data width

属性用于跟踪条形图应设置的百分比。把它改成你喜欢的

jQuery脚本适用于页面上的所有进度条（请参阅JSFIDLE，这样就不必为每个新的进度条复制和粘贴相同的jQuery）。 （只需确保保留HTML的结构，或根据您的喜好进行更改）

div“progress”只是一个扩展器，可以随意命名，而无需更改jQuery

编辑：

---

如果你能使用Javascript和HTML，就不要使用画布。画布（imho）只适用于一件事：音乐会、剧院等的座位预订。

我想既然你在游戏中使用HTML5画布，你就不会在意那些糟糕的浏览器了？（或者换句话说，internet explorer）.你是在画布上构建游戏，但却被进度条卡住了吗？！哦，是的，谢谢你的引导，我要试试这个；）我不喜欢使用settimeout，你有CSS的例子吗？我应该补充一点，这不是HTML5画布方法。。。。除非您计划在画布顶部使用position:absolute和z-index来创建其在画布中的效果，否则您需要使用

fillrect

。

$('.progress-bar').each(function (){    
    var datawidth = $(this).attr('data-width');

    $(this).find("span.data-percent").html(datawidth + "%");

    $(this).animate({
        width: datawidth + "%"
    }, 800);
});