在html5画布上旋转单个图像（但不是其他图像）？ [英] Rotating a single image (but not the others) on an html5 canvas?

问题描述

我有一个sprite我使用正常的sprite sheet blitting在html画布上进行动画。在某些关键事件中，我想改变sprite的方向（即翻转它，或旋转180度），而不改变画布上的任何东西（其他sprite）。

I have a sprite I'm animating on an html canvas using normal sprite sheet blitting. On certain key events I'd like to change the direction of the sprite (ie, flip it, or rotate it 180 degrees) without changing anything (the other sprites) on the canvas.

有人知道如何做这个吗？

Does anyone know how to do this?

推荐答案

在我欣赏Shtééf的回答之后，发现旋转你实际使用来显示的画布似乎不是理想的。

While I appreciate Shtééf's answer, after a bit of research, I have found that rotating the canvas you are actually using to display doesn't seem to be ideal. The saving, rotating and restoring while trying to create complex animations (aka think Street Fighter 2 not astroids) causes the canvas to flicker in even Chrome.

我发现，虽然尝试创建复杂的动画（也被称为街头霸王2不是astroids），保存，旋转和恢复导致画布闪烁。可用策略。这里的想法是，你实际上创建两个画布，一个将是你的游戏，另一个将是一个backbuffer的排序，它将用于旋转或缩放你的sprite。你基本上转换backbuffer画布，绘制有问题的图像，然后将其传输到您的主画布，并恢复（或不是）backbuffer。在这种方式下，你只需要旋转隐藏的画布，只影响整个游戏板上的精灵。

I have found however a usable strategy. The idea here is that you actually create two canvases, one will be for your game and the other will be a backbuffer of sorts and it will be used to rotate or scale your sprites. You essentially transform the backbuffer canvas, draw the image in question, then transfer it to your main canvas and restore (or not) the backbuffer. In this manner, you only rotate the hidden canvas and only effect the sprite in question not the entire game board.

代码看起来像这样（工作进行中）：

The code looks something like this (work in progress):

mainContext.clearRect(lastXpos, lastYpos, lastWidth, lastHeight);
backContext.clearRect(0, 0, lastWidth, lastHeight);
lastXpos = xpos;
lastYpos = ypos;
lastWidth = width;
lastHeight = height;


backContext.save();

//check the direction of the sprite
//turn the backContext to this direction   
//SPRITE_INVERTED==-1
if (spriteXDirection == SPRITE_INVERTED || spriteYDirection == SPRITE_INVERTED) 
{
    var horScale = 0;
    var verScale = 0;

    if (spriteXDirection == SPRITE_INVERTED)
    {
    horScale = width;
    }

    if (spriteYDirection == SPRITE_INVERTED)
    {
    verScale = height;
    }


    backContext.translate(horScale, verScale);
    backContext.scale(spriteXDirection, spriteYDirection);


}


//draw the sprite not we always use 0,0 for top/left
backContext.drawImage(animations[currentPlay].sheet,
                animationX,
                animationY,
                width,
                height, 0, 0, width, height);

//Get the image data from the back context
var image = backContext.getImageData(0, 0, width, height);


//flip the back context back to center - or not, I haven't decided how to optimize this yet.
backContext.restore();


//transfer the image to your main context
mainContext.putImageData(image, xpos, ypos);

这让我很难理解如何翻译我的sprite，移动的地方。它似乎表现更好，然后修改主上下文。

This has saved me a lot of headaches in understanding how to translate my sprites without having everything on my gameboard move all over the place. It also seems to perform better then modifying the main context.

这篇关于在html5画布上旋转单个图像（但不是其他图像）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！