使用图像使用javascript填充画布中的弧

Question

所以我对画布完全不熟悉并尝试了一个项目，在这个项目中，我需要让小球以其背景作为图像移动。以下代码就是我现在正在尝试的。

ctx.beginPath();
ctx.arc(
  this.pos[0], this.pos[1], this.radius, 0, 2 * Math.PI, true
);
let tempCanvas = document.createElement("canvas"),
    tCtx = tempCanvas.getContext("2d");
let ballbackground = new Image();
if (this.color === "green") {
    ballbackground.src = "https://s26.postimg.cc/fl2vwj1mh/greenball.png";
    }
else if (this.color === "yellow") {
    ballbackground.src = "https://s26.postimg.cc/if61a18yh/yellowball.png";
    }
else if (this.color === "blue") {
    ballbackground.src = "https://s26.postimg.cc/xb4khn7ih/blueball.jpg";
    }
tempCanvas.width = 50;
tempCanvas.height = 50;
tCtx.drawImage(ballbackground,0,0,ballbackground.width, ballbackground.height,0,0,50,50);
ctx.fillStyle = ctx.createPattern(tempCanvas, "repeat");

为了移动那些球我做如下：

const velocityScale = timeDelta / NORMAL_FRAME_TIME_DELTA,
    offsetX = this.vel[0] * velocityScale * this.speed,
    offsetY = this.vel[1] * velocityScale * this.speed;
    this.pos = [this.pos[0] + offsetX, this.pos[1] + offsetY];

然而，问题是当物体移动时，它们看起来像滑动背景图像一样：

如果我尝试＆＃34;不重复＆＃34;使用createPattern，球根本不会显示。

我想要的是那些在画布上移动背景图像的球？

Answer 1

使用画布变换来移动球？

＆＃13;

＆＃13;

const ctx = document.querySelector("canvas").getContext("2d");

const pattern = createPattern(ctx);

function drawCircleByPosition(ctx, x, y) {
  ctx.beginPath();
  ctx.arc(x, y, 50, 0, Math.PI * 2, true);
  ctx.fill();
}

function drawCircleByTransform(ctx, x, y) {
  ctx.save();
  ctx.translate(x, y);
  ctx.beginPath();
  ctx.arc(0, 0, 50, 0, Math.PI * 2, true);
  ctx.fill();
  ctx.restore();
}

function render(time) {
  time *= 0.001;
  
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  ctx.fillStyle = pattern;  
  drawCircleByPosition(ctx, 90, 75 + Math.sin(time) * 50);
  drawCircleByTransform(ctx, 210, 75 + Math.sin(time) * 50);
 
  requestAnimationFrame(render); 
}
requestAnimationFrame(render); 

function createPattern(ctx) {
  const tCtx = document.createElement("canvas").getContext("2d");
  tCtx.canvas.width = 50;
  tCtx.canvas.height = 50;
  tCtx.fillStyle = "yellow";
  tCtx.fillRect(0, 0, 50, 50);
  for (let x = 0; x < 50; x += 20) {
    tCtx.fillStyle = "red";
    tCtx.fillRect(x, 0, 10, 50);
    tCtx.fillStyle = "blue";
    tCtx.fillRect(0, x, 50, 10);
  }
  return ctx.createPattern(tCtx.canvas, "repeat");
}

＆＃13;

canvas { border: 1px solid black; }

＆＃13;

<canvas></canvas>

＆＃13;

＆＃13;

＆＃13;

请注意，除了调用save和restore之外，您还可以使用setTransform设置转换，这可能更快，因为保存和恢复会保存所有状态（fillStyle，strokeStyle，font， globalCompositeOperation，lineWidth等...）。

您可以传入自己的矩阵。实施例

 ctx.setTransform(1, 0, 0, 1, x, y);  // for translation

和/或您可以将其重置为默认值，然后使用标准变换操作函数

 ctx.setTransform(1, 0, 0, 1, 0, 0);  // the default
 ctx.translate(x, y);

或你想要做的任何事情的组合。