畫布以循環增量繪製圖像？

Question

我想以循環（或類似）的增量繪製一個圖像作爲進度條，我原本想用畫布中的線條畫出這個圖像，但最終我對它的外觀感到不滿。

這jsfiddle顯示了我希望它看起來如何100％，沒有任何酒吧將被繪製在0％，酒吧的開始和結束點也被標記。

http://jsfiddle.net/6WZNZ/2/

我想這可能使用額外的drawImage參數來實現，我已經使用這個使用圖像作爲填充繪製一個倒數計時器，但我不知道如何在一個圓形畫忽視中間區域增加複雜性的方式？

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 

這可能是解決問題的錯誤方法，這可能嗎？

Answer 1

您可以使用剪切路徑來逐步隱藏/顯示您的邊框圖像。

這裏的僞代碼：

// save the context state and beginPath 
ctx.save(); 
ctx.beginPath(); 

// draw your clipping path here 
// The clipping path will include whatever part of the image you want visible 

// set your path as a clipping path 
ctx.clip(); 

// draw your border image 
// only the clipping path portion of the border image will be visible 
ctx.drawImage(img,0,0); 

// restore the context 
// this turns the clipping off 
ctx.restore(); 


// now draw your level and score (clipping is no longer in effect) 

//game score and level number dont draw over or clear 
ctx.font = 'bold 50px Arial'; 
ctx.fillText("LVL NUMBER", 45, 100); 
ctx.fillText(" TOTAL SCORE", 15, 190); 

//label only ignore 
ctx.font = 'bold 10px Arial'; 
ctx.fillText("end", 57, 25); 
ctx.fillText("start", 125, 25);