Javascript 用图片填充HTML5弧-HTML5画布

我有一个HTML5画布（），看起来像：

我通过以下方法创建球：

function createball(x,y,r,color){
    context.beginPath();
    context.arc(x,y,r,0,Math.PI*2,true);
    context.fillStyle = color;
    context.fill();

}

---

如何用图像填充球？我的意思是一个可能有图案或自然颜色的图像

您可以创建一个图案并将球的填充样式设置为该图案

下面是示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/checkerboard.jpg";
函数start（）{
var pattern=ctx.createPattern（img，'repeat'）；
ctx.beginPath（）；
ctx.arc（50,50,15,0，数学PI*2）；
ctx.closePath（）；
ctx.fillStyle=图案；
ctx.fill（）；
ctx.stroke（）；
}

body{背景色：象牙；}
#画布{边框：1px纯红；}

源图像：
用源图像制作的图案填充圆

@KenFyrstenberg不。我的问题是关于一个球的直截了当的。只需将图像填充到ball@benjour实际上是的。您可以创建一个模式，并将球的

fillStyle

设置为该模式——就像Ken引用的重复答案一样@马克：也许我不明白你的意思，介意给我一个答案吗？@benjour。当然……好了。祝你的项目好运！这正是我想要的。还有一个问题，这可以用精灵来完成吗？你是说从精灵表中剪下单个精灵吗？当然，这有点复杂。（1） 创建一个与精灵大小相同的内存画布（

document.createElement

），（2）使用

drawImage

的剪裁版本将所需精灵绘制到内存画布上，（3）使用内存画布作为图像源，创建精灵图案…然后从精灵表中剪切精灵图案！祝你的项目好运！