1

我正在使用 HTML5 画布元素和本机 javascript 开发游戏。我有不同的游戏对象精灵。是否可以使用本机 javascript 旋转精灵？

例如，我有一个像这样的精灵图像：

在此处输入图像描述

我为这个精灵使用图像：

var image = new Image(...);

image.src = "...";

加载后我想旋转这个图像并在局部变量中保存不同的投影：

var sprite_left = rotate(image, 0),
    sprite_top = rotate(image, 90),
    sprite_right = rotate(image, 180),
    sprite_right = rotate(image, 270);

旋转函数应如下所示：

function rotate(sourceImage, angle){
...
}

有人可以帮我写旋转功能吗？

编辑：

我决定分享我用来测试精灵的代码：

    var wait = function (image, completed, count) {
        if (count == null) count = 0;
        if (!image.complete && count < 1000) {
            count++;
            window.setTimeout(function () {
                wait(image, completed, count);
                console.log('waiting...');
            }, 10);
        }
        else {
            completed();
        }
    },

    rotateW = function (image) {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;

        var p = document.createElement("p");
        p.innerText = "W: ";
        p.appendChild(canvas);
        document.body.appendChild(p);

        var context = canvas.getContext("2d");
        context.translate(canvas.width / 2, canvas.height / 2);
        context.rotate(Math.PI);
        context.translate(-canvas.width / 2, -canvas.height / 2);
        context.drawImage(image, 0, 0);

        var newImage = new Image();
        newImage.src = canvas.toDataURL("image/png");
        return newImage;
    },

    rotateE = function (image) {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;

        var p = document.createElement("p");
        p.innerText = "E: ";
        p.appendChild(canvas);
        document.body.appendChild(p);

        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0);

        var newImage = new Image();
        newImage.src = canvas.toDataURL("image/png");
        return newImage;
    },
    rotateS = function (image, frameCount) {
        var canvas = document.createElement("canvas");
        canvas.width = image.height * frameCount;
        canvas.height = image.width / frameCount;

        var p = document.createElement("p");
        p.innerText = "S: ";
        p.appendChild(canvas);
        document.body.appendChild(p);

        var context = canvas.getContext("2d");
        context.translate(image.height / 2, image.width / (2 * frameCount));
        context.rotate(Math.PI / 2);
        var i = frameCount;
        while (i--> 0) {
            context.drawImage(image, - image.width / 2 , - ( 0.5 + i ) * image.height);
        }
        var newImage = new Image();
        newImage.src = canvas.toDataURL("image/png");
        return newImage;
    },
    rotateN = function (image, frameCount) {
        var canvas = document.createElement("canvas");
        canvas.width = image.height * frameCount;
        canvas.height = image.width / frameCount;

        var p = document.createElement("p");
        p.innerText = "N: ";
        p.appendChild(canvas);
        document.body.appendChild(p);

        var context = canvas.getContext("2d");
        context.translate(image.height / 2, image.width / (2 * frameCount));
        context.rotate( 3 * Math.PI / 2);
        var i = frameCount;
        while (i-- > 0) {
            context.drawImage(image, -image.width / 2, (frameCount - i - 1.5) * image.height);
        }
        var newImage = new Image();
        newImage.src = canvas.toDataURL("image/png");
        return newImage;
    };
/*
        N
        |
   W----O----E
        |
        S
*/
getSprites = function (image, frameCount) {
    var sprite = {
        N: rotateN(image, frameCount),
        S: rotateS(image, frameCount),
        W: rotateW(image, frameCount),
        E: rotateE(image, frameCount)
    };
    return [      
        sprite.W, // left
        sprite.N, // up
        sprite.E, // right
        sprite.S] // down
};

$.sprite = {
    register: function (options) {
        var image = new Image();
        image.src = options.src;

        wait(image, function () {
            var sprites = getSprites(image, options.frameCount);
        });
    }
};

最终结果是：

在此处输入图像描述

4

4 回答 4

3

以下函数将从 img （可能是图像或画布）中创建一个新的画布。给它一个以弧度为单位的角度，或“N”、“S”、“W”来表示相应的旋转。

function createRotatedImage(img, angle) {
     angle = (angle == 'N') ?  -Math.PI/2 :
             (angle == 'S') ?   Math.PI/2 :
             (angle == 'W') ?   Math.PI   :
              angle ;    
     var newCanvas = document.createElement('canvas');
     newCanvas.width  = img.width  ;
     newCanvas.height = img.height ;
     var newCtx = newCanvas.getContext('2d') ;
     newCtx.save      () ;
     newCtx.translate ( img.width / 2, img.height / 2) ;
     newCtx.rotate  (angle);
     newCtx.drawImage ( img, - img.width / 2, - img.height / 2) ; 
     newCtx.restore   () ;
}
于 2013-08-03T14:48:37.713 回答
2

绝对地！不过，它不像旋转图像那么简单。您需要从画布旋转上下文，并在旋转的上下文上绘制该图像，然后将其恢复。

context.save();
context.rotate(angle);

//DRAW IT!

context.restore();
于 2013-08-03T14:29:18.903 回答
2
  1. 使用 a<canvas>预渲染不同的旋转
  2. 使用 via 将它们存储在内存中toBlob，可选择将这些 blob 转换为 URLwindow.URL.createObjectURL
  3. 根据需要交换 URL。

有关画布选项，请参阅此MDN 页面

于 2013-08-03T19:46:16.383 回答
1

有这样的功能怎么样：

Image.prototype.rotate = function(angle) {
    var c = document.createElement("canvas");
    c.width = this.width;
    c.height = this.height;    
    var ctx = c.getContext("2d");    
    ctx.rotate(angle);
    var imgData = ctx.createImageData(this.width, this.height);
    ctx.putImageData(imgData);
    return new Image(imgData);
}

var img1 = new Image();
var img2 = img1.rotate(90);

当然，这只是一个快速示例，可以给您一个想法。

于 2013-08-03T14:51:35.690 回答