仔细看看HTML5 Canvas fillStyle

Question

JSFiddle Link (But, please read first)

我们说，我有一张400 x 200

的画布

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

我在画布上添加了40 x 40球:(参见下面的功能）

createdBall(20,20,20)

在此功能中，球的中心距离顶部左侧20px，半径为20px。 （与使用的原始图像相同的尺寸）

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

}

结果是：

现在，我再添加一些球： fillStyle搞砸了。

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

我发现整个画布会像这样填充一秒钟，并且只选择我们想要填充的部分。像这样的东西：

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

Answer 1

您可以使用转换/翻译代替arc x-y，请参阅here：

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

  

...这有效，因为... translate（x，y）实际上正在推动   画布[0,0]向右和向下到[x，y]。这也是   将图像模式从左上角推到[x，y]，以便它现在很好   适合弧内。顺便说一下，创建模式效率更高   一旦在createBall函数之外。 ;-) - @markE