自定义形状将与画布中的图像模式

Question

以下是完整代码http://jsfiddle.net/4VZQD/3/

在此我需要用图像模式填充绿色，红色和灰色区域。我尝试了一些但失败了。

var greenImg = new Image();
            greenImg.onload = function(s){
                var greenPtrn = context.createPattern(greenImg,'repeat');
                context.fillStyle = greenPtrn;
                context.save();
                context.beginPath();  
                context.moveTo(start1.x,start1.y);  
                context.lineTo(d.x,d.y); 
                context.arc(x+xVar,y+yVar,(cirRadius2+(cirRadius3-cirRadius2)*status[cnt-1][0]/100),angle * Math.PI/180,(angle-gap) * Math.PI/180,true); 
                context.lineTo(start.x,start.y);
                context.arc(x+xVar,y+yVar,cirRadius2,(angle-gap) * Math.PI/180, angle * Math.PI/180,false);
                context.fill();
                context.stroke();
            }
            greenImg.src="green.JPG";

请帮忙！

Answer 1

此行中有一个未定义的值status[cnt-1]，因此永远不会达到fill（）：

context.arc(
    x+xVar,y+yVar,
    (cirRadius2+(cirRadius3-cirRadius2)*status[cnt-1][0]/100),
    angle * Math.PI/180,
    (angle-gap) * Math.PI/180,
    true
);