仔细看看HTML5 Canvas fillStyle

Question

JSFiddle链接（但是，请先阅读）

让我们说，我有一块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

可以使用transform / translate代替arc的xy，请参见此处 ：

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

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