Question

我在画布内以编程方式生成图像。

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度？

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

EDIT2：我尝试使用此代码旋转它：

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

但它不起作用

EDIT3：这是我的代码的更复杂的例子：

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度，我必须放

NaN

之前

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

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

1 个答案: