Javascript 在画布上旋转精灵
以下是代码： 当你们点击旋转时，精灵开始以错误的倾斜方式“坠落”，当然，它也会旋转。是否可以编辑“下落”动画，以便只有精灵旋转，但其下落方式与未旋转的精灵相同 谢谢你的帮助 这里有一些代码，否则我不能问这个问题Javascript 在画布上旋转精灵,javascript,canvas,drawing,Javascript,Canvas,Drawing,以下是代码： 当你们点击旋转时，精灵开始以错误的倾斜方式“坠落”，当然，它也会旋转。是否可以编辑“下落”动画，以便只有精灵旋转，但其下落方式与未旋转的精灵相同 谢谢你的帮助 这里有一些代码，否则我不能问这个问题 ctx.save(); ctx.translate(0, 0); ctx.rotate(350 * Math.PI / 180); ctx.drawImage(img, sprites.birds.bird2.x, sprites.birds.bird2.y, sprites.
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>
#按钮1{
宽度：102px；
高度：30px；
颜色：#ffffff；
背景色：#03a9f4；
边界半径：11px；
边界：0px；
大纲：0px；
光标：指针；
}
var canvas、ctx、world、bird；
var img=新图像（）；
变量精灵={
鸟类：{
bird1：{
x:312，
y:230，
宽度：34，
身高：24
},
小鸟2：{
x:312，
y:256，
宽度：34，
身高：24
},
鸟类3：{
x:312，
y:282，
宽度：34，
身高：24
}
},
上行管道：{
x:503，
y:0，
宽度：52，
身高：400
},
};
世界={
迭代：0，
清除：函数（）{
ctx.fillRect（0，0，canvas.width，canvas.height）；
ctx.fillStyle=“#9c27b0”；
},
绘制精灵：函数（）{
ctx.drawImage（图像，精灵。上下管。x，精灵。上下管。y，精灵。上下管。宽度，精灵。上下管。高度，150，150，精灵。上下管。宽度，精灵。上下管。高度）；
}
};
鸟={
x:50，
y:150，
帧：0，
状态：空，
秋季:0,，
轮换：0，
旋转：假，
rangle:0，//更新
跳跃：0，
更新：函数（）{
如果（world.iteration%5==0）{
如果（this.frame>=2）{
此.frame=0；
}否则{
该帧+=1；
}
}
开关（此状态）{
“正常”情况：
if（this.y+sprites.birds.bird1.height+100