这是代码: https://jsfiddle.net/test123456978911337/cbL95gne/3/
当你点击旋转时， Sprite 开始以错误、倾斜的方式“下落”，但当然，它也会旋转。是否可以编辑“下落”动画，以便只有 Sprite 旋转，但它会以与非旋转 Sprite 相同的方式下落？
感谢您的帮助
这里有一些代码，否则我不能问这个问题。
ctx.save();
ctx.translate(0, 0);
ctx.rotate(350 * Math.PI / 180);
ctx.drawImage(img, sprites.birds.bird2.x, sprites.birds.bird2.y, sprites.birds.bird2.width, sprites.birds.bird2.height, this.x, this.y, sprites.birds.bird2.width, sprites.birds.bird2.height);
ctx.restore();
最佳答案
我已经更新了，请看一下
<body>
<style>
#button1 {
width: 102px;
height: 30px;
color: #ffffff;
background-color: #03a9f4;
border-radius: 11px;
border: 0px;
outline: 0px;
cursor: pointer;
}
</style>
<div id="canvas_container" style="text-align: center;">
<input type="button" value="rotate" id="button1">
</div>
<script type="text/javascript">
var canvas, ctx, world, bird;
var img = new Image();
var sprites = {
birds: {
bird1: {
x: 312,
y: 230,
width: 34,
height: 24
},
bird2: {
x: 312,
y: 256,
width: 34,
height: 24
},
bird3: {
x: 312,
y: 282,
width: 34,
height: 24
}
},
up_pipe: {
x: 503,
y: 0,
width: 52,
height: 400
},
};
world = {
iteration: 0,
clear: function() {
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#9c27b0";
},
draw_sprite : function(){
ctx.drawImage(img, sprites.up_pipe.x, sprites.up_pipe.y, sprites.up_pipe.width, sprites.up_pipe.height, 150, 150, sprites.up_pipe.width, sprites.up_pipe.height);
}
};
bird = {
x: 50,
y: 150,
frame: 0,
status: null,
fall: 0,
rotation: 0,
rotate: false,
rangle : 0, // update
jump: 0,
update: function() {
if (world.iteration % 5 === 0) {
if (this.frame >= 2) {
this.frame = 0;
} else {
this.frame += 1;
}
}
switch (this.status) {
case "normal":
if (this.y + sprites.birds.bird1.height + 100 < canvas.height) {
this.fall += 0.1;
this.y += this.fall;
}
break;
case "jump":
if (this.jump < 11 && this.status == "jump") {
this.fall = 0;
this.y -= 2;
this.jump++;
} else {
this.status = "normal";
this.jump = 0;
}
break;
}
},
draw: function() {
if (this.rotate === true) {
this.ranglr += 0.1; // increments a small amount each frame
switch (this.frame) {
case 0:
ctx.save();
ctx.translate(this.x, this.y); // translate the origin to the sprites position
ctx.rotate(this.ranglr); // set the rotation
ctx.drawImage(img, sprites.birds.bird1.x, sprites.birds.bird1.y, sprites.birds.bird1.width, sprites.birds.bird1.height, 0, 0, sprites.birds.bird1.width, sprites.birds.bird1.height);
ctx.restore();
break;
case 1:
ctx.save();
ctx.translate(this.x, this.y); // translate the origin to the sprites position
ctx.rotate(this.ranglr); // set the rotation
ctx.drawImage(img, sprites.birds.bird2.x, sprites.birds.bird2.y, sprites.birds.bird2.width, sprites.birds.bird2.height, 0, 0, sprites.birds.bird2.width, sprites.birds.bird2.height);
ctx.restore();
break;
case 2:
ctx.save();
ctx.translate(this.x, this.y); // translate the origin to the sprites position
ctx.rotate(this.ranglr); // set the rotation
ctx.drawImage(img, sprites.birds.bird3.x, sprites.birds.bird3.y, sprites.birds.bird3.width, sprites.birds.bird3.height, 0, 0, sprites.birds.bird3.width, sprites.birds.bird3.height);
ctx.restore();
break;
}
} else if (this.rotate === false) {
this.ranglr = 0; // sets angle to default 0
switch (this.frame) {
case 0:
ctx.drawImage(img, sprites.birds.bird1.x, sprites.birds.bird1.y, sprites.birds.bird1.width, sprites.birds.bird1.height, this.x, this.y, sprites.birds.bird1.width, sprites.birds.bird1.height);
break;
case 1:
ctx.drawImage(img, sprites.birds.bird2.x, sprites.birds.bird2.y, sprites.birds.bird2.width, sprites.birds.bird2.height, this.x, this.y, sprites.birds.bird2.width, sprites.birds.bird2.height);
break;
case 2:
ctx.drawImage(img, sprites.birds.bird3.x, sprites.birds.bird3.y, sprites.birds.bird3.width, sprites.birds.bird3.height, this.x, this.y, sprites.birds.bird3.width, sprites.birds.bird3.height);
break;
}
}
}
};
canvas = document.createElement("canvas");
canvas.id = "test_canvas";
canvas.width = 400;
canvas.height = 700;
canvas.style.border = "1px dashed blue";
count_since_start = 0;
document.getElementById("canvas_container").appendChild(canvas);
ctx = canvas.getContext("2d");
img.src = "http://i.imgur.com/NwCWjc4.png";
img.onload = init();
function init() {
world.iteration++;
window.requestAnimationFrame(run);
bird.status = "normal";
}
function run() {
world.iteration++;
window.requestAnimationFrame(run);
update_game_properties();
draw_game_properties();
}
function update_game_properties() {
bird.update();
}
function draw_game_properties() {
world.clear();
world.draw_sprite();
bird.draw();
}
document.getElementById("test_canvas").onmousedown = function(event) {
switch (event.which) {
case 1:
bird.status = "jump";
break;
}
};
document.getElementById("button1").onclick = function() {
if (bird.rotate) {
bird.rotate = false;
} else {
bird.rotate = true;
}
}
</script>
</body>
关于javascript - 在 Canvas 中旋转 Sprite ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44561094/