画布以圆形增量绘制图像？

Question

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

这个 jsfiddle 展示了我希望它如何查看 100%，在 0% 时不会绘制任何条，还标记了条的起点和终点。

var canvas = document.getElementById("test");
var ctx = canvas.getContext("2d");

var img = new Image();
img.src = "http://i.imgur.com/Jhteqyx.png";

img.onload = function() {

  ctx.drawImage(img,
    0,
    0
  );
};


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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="test" width=700 height=700></canvas>

我认为这可以使用额外的 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);