画布以循环增量绘制图像？

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);