如何使用本机javascript旋转图像 [英] How to rotate Image using native javascript

问题描述

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

I'm developing a game using HTML5 canvas element and native javascript. I have different sprites for game objects. Is it possible to rotate sprites using native javascript?

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

For example, I have a sprite image like this:

我使用图片此精灵：

var image = new Image(...);

image.src = "...";

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

After loading I want to rotate this image and save different projections in local variables:

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){
...
}

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

Could anybody help me to write the rotate function?

编辑：

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

I have decided to share my code, which I used to test my sprites:

    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);
        });
    }
};

最终结果是：

< img src =https://i.stack.imgur.com/Jn3bj.pngalt =在此处输入图像说明>

推荐答案

1. 使用< canvas> 预渲染不同的旋转


2. 存储这些在内存中使用via toBlob ，可选择使用 window.URL.createObjectURL
$ b将这些blob转换为URL $ b
3. 根据需要交换网址。

1. Use a <canvas> to pre-render the different rotations
2. Store these in memory using via toBlob, optionally converting these blobs to URLs with window.URL.createObjectURL
3. Swap URLs as desired.

参见 此 MDN页面

See this MDN page for canvas options

这篇关于如何使用本机javascript旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！