html5画布加载圆形图像

Question

我正在尝试从HTML5画布中的图像创建加载圆.

这是我在百分比为50%时所期望的结果:

这是我经过大量测试后所做的事情:( 蓝色笔划只是看圆圈,之后会被移除)

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

var canvas = document.getElementsByTagName("canvas")[0];

canvas.width  = 500;
canvas.height = 500;

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

function draw() {
    ctx.globalAlpha = 0.5
    ctx.drawImage(img, 0, 0);
    ctx.globalAlpha = 1;
    
    var X       = 50;
    var Y       = 50;
    var Radius  = img.width / 2;
    var end     = 40;
    var start   = 0;
    var PI2     = Math.PI * 2;
    var quart   = Math.PI / 2;
    var pct     = 50 / 100;
    var extent  = (end - start) * pct;
    var current = (end - start) / 100 * PI2 * pct - quart;
    
    var pattern = ctx.createPattern(img, 'no-repeat');
    
    ctx.beginPath();
    ctx.arc(X, Y, Radius, -quart, current);
    ctx.closePath();
    ctx.fillStyle=pattern;
  	ctx.fill();
    ctx.strokeStyle = "blue";
    ctx.stroke();
}

<canvas></canvas>

正如您所看到的,此处的结果并非如此

怎么了？

Answer 1

首先，您需要正确计算您的中心点：

var X = img.width / 2;
var Y = img.height / 2;

然后你需要沿着内半径逆时针方向转一圈Radius - 17：

ctx.beginPath();
ctx.arc(X, Y, Radius, -quart, current);
ctx.arc(X, Y, Radius - 17, current, -quart, true);
ctx.closePath();

如果您对笔划轮廓不感兴趣，可以先移至中心，然后arc：

ctx.beginPath();
ctx.moveTo(X, Y);
ctx.arc(X, Y, Radius, -quart, current);
ctx.closePath();

例子：

var X = img.width / 2;
var Y = img.height / 2;

ctx.beginPath();
ctx.arc(X, Y, Radius, -quart, current);
ctx.arc(X, Y, Radius - 17, current, -quart, true);
ctx.closePath();