如何解决如何阻止画布添加到旋转中？
我试图让一个矩形在游戏循环中逆时针旋转 10 度。我希望盒子仅旋转 10 度。不要在下一个循环中再增加 10 度，因为这就是它正在做的：
这是我当前的绘制函数：
...
class Bok {
static width = 17;
static height = 12;
constructor(position) {
this.position = position;
}
draw() {
...
ctx.beginPath();
ctx.rect(this.position.x,this.position.y,17,12);
ctx.fillStyle = "red";
ctx.strokeStyle = "black";
ctx.lineWidth = 10;
ctx.translate(this.position.x + Bok.width / 2,this.position.y + Bok.height / 2);
// this keeps adding 10 degrees to the box every update,// how can i rotate it 10 degrees without adding on to the
// previous rotation?
ctx.rotate(10);
ctx.translate(-(this.position.x + Bok.width / 2),-(this.position.y + Bok.height / 2));
ctx.stroke();
ctx.fill();
...
}
...
解决方法
最简单的解决方案是为其设置触发器。
class Bok {
static width = 17;
static height = 12;
constructor(position) {
this.position = position;
this.rotated = false;
}
draw() {
...
ctx.beginPath();
ctx.rect(this.position.x,this.position.y,17,12);
ctx.fillStyle = "red";
ctx.strokeStyle = "black";
ctx.lineWidth = 10;
ctx.translate(this.position.x + Bok.width / 2,this.position.y + Bok.height / 2);
if (!this.rotated) {
ctx.rotate(10);
this.rotated = true;
}
ctx.translate(-(this.position.x + Bok.width / 2),-(this.position.y + Bok.height / 2));
ctx.stroke();
ctx.fill();
...
}
...
添加更新代码以根据速度旋转
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = 500;
let friction = 0.8;
let gravity = 1.5;
class Player {
constructor() {
this.x = 128;
this.y = 260;
this.w = 32;
this.h = 32;
this.vx = 0;
this.vy = 0;
this.speed = 3;
this.color = "green";
this.a = 0;
this.r = this.a * (Math.PI/180);
}
draw() {
ctx.save();
ctx.fillStyle = this.color;
ctx.translate(this.x+this.w/2,this.y+this.h/2)
ctx.rotate(-this.r);
ctx.fillRect(0,this.w,this.h);
ctx.restore();
}
update() {
if (controller.space) {
this.vy < 10 ? this.vy -= this.speed : this.vy = 10;
this.a < 10 ? this.a += 0.5 : this.a = 10;
} else {
this.a > 0 ? this.a -= 0.5 : this.a = 0;
}
this.r = this.a * (Math.PI/180);
this.vy += gravity;
this.y += this.vy;
this.vy *= friction;
this.draw()
}
canvasCollision() {
if (this.x <= 0) this.x = 0;
if (this.y <= 0) this.y = 0;
if (this.x + this.w >= canvas.width) this.x = canvas.width - this.w;
if (this.y + this.h >= canvas.height) {
this.y = canvas.height - this.h;
this.vy = 0;
}
}
}
let player = new Player();
function handlePlayer() {
player.draw();
player.update();
}
class Controller {
constructor() {
this.space = false;
let keyPress = (e) => {
if (e.code === "Space") this.space = e.type === "keydown";
};
window.addEventListener("keydown",keyPress);
window.addEventListener("keyup",keyPress);
}
}
let controller = new Controller();
function animate() {
ctx.clearRect(0,canvas.width,canvas.height);
ctx.font = 'bold 48px serif';
ctx.fillText("Spacebar",100,50);
player.update();
player.canvasCollision();
requestAnimationFrame(animate);
}
animate();<canvas id="canvas"></canvas>首先，查看您的代码，您似乎对 API 的工作方式感到困惑。
您需要在绘制（定义）路径之前转换上下文。
现在，有很多方法可以不累积转换：
漫长的道路：执行逆变换。
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const duration = 5000;
const cx = 150;
const cy = 80;
const start = performance.now();
function draw( time ) {
ctx.clearRect(0,canvas.height);
const delta = ((start - time) % duration) / duration;
ctx.translate( cx,cy );
ctx.rotate( Math.PI * 2 * delta );
ctx.translate( -cx,-cy );
ctx.strokeRect( cx - 20,cy - 40,40,80 );
// inverse
ctx.translate( cx,cy );
ctx.rotate( Math.PI * 2 * delta * -1);
ctx.translate( -cx,-cy );
// an horizontal line
ctx.fillRect(0,80,5);
requestAnimationFrame( draw );
}
requestAnimationFrame( draw );<canvas></canvas>简短但缓慢的方法，在绘制之前保存（）并在之后恢复（）。但这将保存和恢复画布上下文的每个属性，这可能是一种矫枉过正。
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const duration = 5000;
const cx = 150;
const cy = 80;
const start = performance.now();
function draw( time ) {
ctx.clearRect(0,canvas.height);
const delta = ((start - time) % duration) / duration;
ctx.save();
ctx.translate( cx,80 );
ctx.restore();
// an horizontal line
ctx.fillRect(0,5);
requestAnimationFrame( draw );
}
requestAnimationFrame( draw );<canvas></canvas>简洁的方法：将您的上下文转换重置为单位矩阵。
这可能看起来有点复杂，但是当您的代码不断增长并且您将有很多对象需要管理时，将它们都与单位矩阵相关联会为您省去很多麻烦。
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const duration = 5000;
const cx = 150;
const cy = 80;
const start = performance.now();
function draw( time ) {
ctx.clearRect(0,80 );
// clear to identity transform
ctx.setTransform(1,1,0);
// an horizontal line
ctx.fillRect(0,5);
requestAnimationFrame( draw );
}
requestAnimationFrame( draw );<canvas></canvas>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
