在画布中旋转单个图像以进行游戏

Question

我正在尝试制作一个鸟类游戏，其中我只旋转我通过游戏类绘制的单个鸟类图像（底部的最后一个函数）。有什么方法可以让我的鸟在跳跃和落下时旋转 30 度角？我不想只为我的鸟创建另一个画布。目前，除非我不在跳转功能中恢复，否则没有任何效果。

class Bird extends Sprite {

constructor(options, game) {
super(options);
this.image = options.image;
this.sX = options.sX;
this.sY = options.sY;
this.sWidth = options.sWidth;
this.sHeight = options.sHeight;
this.dX = options.dX;
this.dY = options.dY;
this.dWidth = options.dWidth;
this.dHeight = options.dHeight;
this.frameIndex = 1;
this.tickCount = 0;
this.ticksPerFrame = 10;
this.numFrames = 8;
this.game = game;
this.birdRight = this.dX + this.dWidth;
}

jump(e, ctx) {

ctx.save();
ctx.translate(this.xPos + this.width / 2, this.yPos + this.height / 2);
ctx.rotate(this.dY * 15 * Math.PI / 360);
ctx.restore();
this.dY -= 40;
this.sX = 0;
}

fall(ctx) {
this.tickCount += 1;



if (this.tickCount > this.ticksPerFrame) {
  this.sX = 27;
  this.tickCount = 0;
}



if (this.dY < 450 ) {
  this.dY += 1.5;
} else {
  this.dY = this.dY;
}

// this.sX = (this.frameIndex * this.sWidth) / (this.numFrames);
}

draw(ctx) {
ctx.clearRect(0, 0, Game.DIM_X, Game.DIM_Y);
this.allObjects().forEach((object) => {
  object.draw(ctx);
});
}

Answer 1

旋转图像

// img is an image, canvas, or video element
// x,y where on the canvas the image center will be
// angle is radians with positive in clockwise 
function drawImageRotated(img,x,y,angle){
    ctx.setTransform(1,0,0,1,x,y); // set position of image center
    ctx.rotate(angle); // rotate
    ctx.drawImage(img,-img.width/2,-img.height/2); // draw image offset so its center is at x,y
    ctx.setTransform(1,0,0,1,0,0); // restore default transform
}

旋转、缩放和包含 alpha 值

// Note the function does not restore. This improves the speed of this function
// if you call it many times in a row as SetTransform overwrite any existing transform
// alpha is a value from 0 - 1
// scaleX is scale in image X direction
// scaleY is scale in image Y Direction.
// image is rotated and scaled about its center
// center of image is located at canvas pixel coords x,y
function drawImage(img,x,y,scaleX,scaleY,angle,alpha){
    if(!alpha) { return }
    ctx.globalAlpha = alpha        
    ctx.setTransform(scaleX,0,0,scaleY,x,y); // set position of image center
    ctx.rotate(angle); // rotate
    ctx.drawImage(img,-img.width/2,-img.height/2); // draw image offset so its center is at x,y
}

// same as above with cx,cy as the point of rotation
// cx,cy are in image pixels
function drawImageCenterAt(img,x,y,cx,cy,scaleX,scaleY,angle,alpha){
    if(!alpha) { return }
    ctx.globalAlpha = alpha
    ctx.setTransform(scaleX,0,0,scaleY,x,y); // set position of image center
    ctx.rotate(angle); // rotate
    ctx.drawImage(img,-cx,-cy); // draw image offset so its center is at cx,cy
}

所有这些功能在普通 PC/笔记本电脑上每 60 秒可以渲染大约 500-1000 张中等大小的图像

Answer 2

可以用 css 做。

为具有transform: rotate(30deg);的对象添加样式属性