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

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

1 个答案: