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

我想以圆形（或类似的）增量绘制一幅图像作为进度条，我原本想用画布上的线条来绘制，但最终我对它的外观不满意

这个jsfiddle显示了我希望它看起来是100%，没有一个条会被画成0%，条的起点和终点也会被标记

var canvas=document.getElementById（“测试”）；
var ctx=canvas.getContext（“2d”）；
var img=新图像（）；
img.src=”http://i.imgur.com/Jhteqyx.png";
img.onload=函数（）{
ctx.图纸图像（img，
0,
0
);
};
//游戏分数和关卡号码不能超过或清除
ctx.font='bold 50px Arial'；
ctx.fillText（“层号”，45100）；
ctx.fillText（“总分”，15190）；
//标签只忽略
ctx.font='bold 10px Arial'；
ctx.fillText（“结束”，57，25）；
ctx.fillText（“开始”，125，25）
您可以使用剪切路径增量隐藏/显示边框图像

以下是伪代码：

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

再次感谢，一条线可以剪辑一个图像还是它必须是一个封闭的形状？你昨天给我的例子是画一条裁剪线（？）而不是一条反向的彩色线，它非常适合这个任务。不，线不能是裁剪路径。如果您想使用我前面的示例进行剪裁，只需将直线替换为矩形，将圆弧替换为楔形。谢谢，现在就开始吧。我想你不能告诉我这些矩形有什么不对吗？我将它分为两个函数，一个用于垂直方向，另一个用于水平方向，并保持第一个函数的y坐标相同，第二个函数的x坐标相同。对于水平线，请更改宽度。对于垂直线，请更改高度。对于角点，绘制楔子——具有闭合路径的圆弧（圆弧需要延伸到您试图剪裁的边界之外。如果您的边界下没有坚实的背景，则需要使用此剪裁方法，而不是“用反向线显示”方法。