这个问题在这里已有答案：
我正在创建一个画布游戏，其中的球相互反弹。我希望这些球有自己的皮肤，背景图像放在弧形元素上。
当球没有反弹时，图像剪得很细，像圆弧一样呈圆形。但是，当我开始为球设置动画时，它根本不会移动，因为剪辑功能不允许重绘图像或弧。
那时我在画布中发现了允许在动画制作时使用剪辑方法的保存和恢复功能。
这个问题是图像的一部分没有正确剪辑。只有一半的动画是圆形的，另一半是矩形图像。我已经尝试调整图像的位置，但这并没有产生预期的结果。
我不确定为什么代码表现得像这样以及如何修复它以便它只是一个带有图像背景的动画球。
如果有人对此有所了解并且可能是解决方案，那将非常感激。
以下是代码和下面的代码段：
const x = document.getElementById('canvas');
const ctx = x.getContext('2d');
let slide = 0;
class Balls {
constructor(xPos, yPos, radius) {
this.xPos = xPos;
this.yPos = yPos;
this.radius = radius;
this.imgX = this.xPos - this.radius;
}
}
const img = document.createElement('img');
img.src = 'https://geology.com/google-earth/google-earth.jpg';
Balls.prototype.render = function() {
ctx.save();
ctx.arc(this.xPos, this.yPos, this.radius, 0, Math.PI * 2);
ctx.clip();
ctx.drawImage(img, this.imgX, this.yPos - this.radius, this.radius * 2, this.radius * 2);
};
Balls.prototype.motion = function() {
this.imgX = this.imgX + 1;
this.xPos = this.xPos + 1;
}
let object = new Balls(100, 100, 25);
const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
object.render();
object.motion();
ctx.restore();
}
setInterval(animate, 50);body {
background-color: grey;
}
#canvas {
background-color: white;
}
#mod {
border-radius: 100%
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src='practice.js'></script>
<link rel="stylesheet" type="text/css" href="practice.css">
</head>
<body>
<canvas id="canvas" height="200" width="800" />
</body>
</html>你需要调用ctx.beginPath()，否则，每次调用arc()都会被添加到同一个且唯一的子路径中。这意味着最后，你剪切了一个由很多弧构成的奇怪路径：5帧后路径的ASCII表示：((((( )
const x = document.getElementById('canvas');
const ctx = x.getContext('2d');
let slide = 0;
class Balls {
constructor(xPos, yPos, radius) {
this.xPos = xPos;
this.yPos = yPos;
this.radius = radius;
this.imgX = this.xPos - this.radius;
}
}
const img = document.createElement('img');
img.src = 'https://geology.com/google-earth/google-earth.jpg';
Balls.prototype.render = function() {
ctx.save();
// begin a new sub-path
ctx.beginPath();
ctx.arc(this.xPos, this.yPos, this.radius, 0, Math.PI * 2);
ctx.clip();
ctx.drawImage(img, this.imgX, this.yPos - this.radius, this.radius * 2, this.radius * 2);
};
Balls.prototype.motion = function() {
this.imgX = this.imgX + 1;
this.xPos = this.xPos + 1;
}
let object = new Balls(100, 100, 25);
const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
object.render();
object.motion();
ctx.restore();
requestAnimationFrame(animate);
}
animate();body {
background-color: grey;
}
#canvas {
background-color: white;
}
#mod {
border-radius: 100%
}<canvas id="canvas" height="200" width="800" />另请注意，对于圆形遮罩，最好使用合成而不是剪切，合成处理更好的抗锯齿，并且不需要昂贵的保存/恢复。
const x = document.getElementById('canvas');
const ctx = x.getContext('2d');
let slide = 0;
class Balls {
constructor(xPos, yPos, radius) {
this.xPos = xPos;
this.yPos = yPos;
this.radius = radius;
this.imgX = this.xPos - this.radius;
}
}
const img = document.createElement('img');
img.src = 'https://geology.com/google-earth/google-earth.jpg';
Balls.prototype.render = function() {
// begin a new sub-path
ctx.beginPath();
ctx.arc(this.xPos, this.yPos, this.radius, 0, Math.PI * 2);
ctx.fill();
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(img, this.imgX, this.yPos - this.radius, this.radius * 2, this.radius * 2);
ctx.globalCompositeOperation = 'source-over';
};
Balls.prototype.motion = function() {
this.imgX = this.imgX + 1;
this.xPos = this.xPos + 1;
}
let object = new Balls(100, 100, 25);
const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
object.render();
object.motion();
requestAnimationFrame(animate);
}
animate();body {
background-color: grey;
}
#canvas {
background-color: white;
}
#mod {
border-radius: 100%
}<canvas id="canvas" height="200" width="800" />