Javascript 近距离观察HTML5画布填充样式

比如说，我有一个

400x200

<canvas id="myCanvas" width="400" height="200"></canvas>

在该功能中，球的中心位于左上角20px处，半径为20px。（使用的尺寸与原始图像相同）

结果是：

现在，我添加了更多的球：填充样式出错。

createBall(50,50,20);
createBall(80,80,20);

我发现整个画布像这样被填充了一秒钟，只拾取了我们想要填充的部分。大概是这样的：

---

这就是我的球到底发生了什么。如何用图像填充每个球？

您可以使用“变换/平移”代替圆弧的x-y，请参见：

…这是因为。。。平移（x，y）实际上是推动 画布的[0,0]原点向右和向下至[x，y]。这也 将图像模式从左上角推到[x，y]，使其现在看起来很好 适合在弧内。顺便说一句，创建模式更有效 一旦超出createBall函数的范围；-——@马克

---

我不知道答案。但我喜欢你的解释。好问题，提问前要努力！！！！你能费心解释一下吗？及投寄代码（如适用）possible@K3N此特定问题需要进行额外计算。

function createBall(x,y,r){
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext("2d");

    context.beginPath();
    context.arc(x,y,r,0,Math.PI*2,true);
    context.fillStyle = context.createPattern(img, 'repeat');
    context.fill();

}

createBall(50,50,20);
createBall(80,80,20);

createBall(20, 20, 20);
createBall(50, 50, 20);
createBall(80, 80, 20);

function createBall(x,y,r){
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext("2d");

    context.beginPath();
    context.translate(x - r, y - r);
    context.arc(r, r, r, 0, Math.PI * 2, true);
    context.fillStyle = context.createPattern(img, 'repeat');
    context.fill();
    context.translate(-(x - r), -(y - r));
}