如何在不绘制图像的情况下在 HTML5 canvas 内旋转图像？

Question

我在 canvas 中以编程方式生成图像。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// here I have some code in loop setting individual pixels
// ...
//
// save image to variable
var dataURL = canvas.toDataURL();

如何将创建的图像旋转 90 度？

编辑：这不是重复的，因为我不绘制图像，它永远不可见。我只想生成它，旋转它并保存到变量。

编辑2：我正在尝试使用此代码旋转它：

ctx.translate(canvas.width / 2, canvas.height / 2)
ctx.rotate(90 * Math.PI / 180)

但是不行

编辑3：这是我的代码的更复杂示例：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
canvas.setPixel = function (x, y, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, 1, 1);
}
for (var i in data) {
    for (var j in data[i]) {
        switch (data[i][j]) {
            case 1:
                var color = '#ffff00',
                    type = 'w'
                break
            case 3:
                var rgb = (256 - parseInt(pixels[i][j]) - minus.grass).toString(16),
                    color = '#00' + rgb + '00',
                    type = 'g'
                break
            case 4:
                var rgb = (256 - parseInt(pixels[i][j]) - minus.hills).toString(16),
                    color = '#' + rgb + rgb + '00',
                    type = 'h'
                break
            case 5:
                var rgb = (parseInt(pixels[i][j]) + minus.mountains).toString(16),
                    color = '#' + rgb + rgb + rgb,
                    type = 'm'
                break
            case 6:
                var rgb = (parseInt(pixels[i][j]) + minus.snow).toString(16),
                    color = '#' + rgb + rgb + rgb,
                    type = 'm'
                break
        }
        if (i % fieldSize == 0 && j % fieldSize == 0) {
            if (notSet(fields[y])) {
                fields[y] = []
            }
            fields[y][x] = type
            x++
        }
        canvas.setPixel(i, j, color)
    }
    if (i % fieldSize == 0) {
        x = 0
        y++
    }
}
ctx.translate(canvas.width / 2, canvas.height / 2)
ctx.rotate(90 * Math.PI / 180)    

var token = {
    type: 'save',
    map: canvas.toDataURL('image/png')
}

ws.send(JSON.stringify(token))

Answer 1

要将图像旋转 90 度，我必须将

ctx.translate(0, canvas.height)
ctx.rotate(270 * Math.PI / 180)

之前

for (var i in data) {
    for (var j in data[i]) {
        switch (data[i][j]) {
        // ... drawing pixels
        }
    }
}

如何在不绘制图像的情况下在 HTML5 canvas 内旋转图像？

How to rotate image inside HTML5 canvas without drawing it?

image

rotation

html5-canvas