Javascript，具有更新的HTML5（畫布）進度條

Question

我正在尋找在html5畫布中執行進度條（在我的情況下，它是遊戲的生命條）的最佳方式。

我不知道是否最好使用javascript和dom元素，或者直接在畫布上繪製這個條。

我需要更新功能，例如myBar.updateValue(40)，當然，我需要顯示新欄而不刷新所有頁面或所有畫布。

你知道嗎？現有的腳本？謝謝！

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> 

DEMO：http://jsbin.com/EGAzAZEK/1/edit

並與CSS動畫：http://jsbin.com/EGAzAZEK/3/edit

Answer 2

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> 

CSS：

html, body { 
    margin: 0; 
    padding: 15px; 
    width: 100%; 
    height: 100%; 
    position: relative; 
    color: #fff; 
} 

.progress { 
    position: relative; 
    width: 100%; 
    height: 30px; 
} 
.progress-bar { 
    margin-bottom: 5px; 
    width: 0%; 
    height: 30px; 
    position: relative; 
    background-color: rgb(66, 139, 202); 
} 
.progress-bar-text { 
    position: absolute; 
    top: 0px; 
    width: 100%; 
    text-align: center; 

    /* 
    Do not change the values below, 
    unless you want your text to display away from the bar itself. */ 
    line-height: 30px; 
    vertical-align: middle; 
} 

的jQuery：

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

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

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

Link to JSFiddle

的HTML data-width屬性被用於跟蹤百分比杆應設置爲。改變它你喜歡。

jQuery腳本可以處理頁面上的所有進度條（請參閱JSFiddle，因此，您不必爲每個新的進度條複製和粘貼相同的jQuery （只要確保保持HTML，或將其更改爲自己的喜好）

DIV的「進步」僅僅是一個擴展，它可以被命名爲任何你想要 - 沒有你不必更改jQuery的

編輯： 如果可以的話。使用Javascript & HTML，不要使用畫布。畫布（imho）只適用於一件事：爲音樂會，劇院等提供座位預訂。