如何在HTML5画布内旋转图像而不绘制图像?

蝴蝶杀手

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

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))
蝴蝶杀手

要将图像旋转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
        }
    }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

清除画布后未绘制图像(html5画布)

来自分类Dev

Chrome 31.0 HTML5画布绘制图像

来自分类Dev

无法在Phonegap中的HTML5画布上绘制图像

来自分类Dev

在HTML5画布上绘制图像

来自分类Dev

HTML5画布:在单个画布上的范围内旋转裁剪的图像

来自分类Dev

在html5画布内绘制图像的一部分

来自分类Dev

在html5画布内绘制图像的一部分

来自分类Dev

如何在HTML5画布上绘制背景图像

来自分类Dev

html5画布绘制多个图像

来自分类Dev

如何获取在HTML5画布上绘制的图像的X / Y值?

来自分类Dev

如何下载HTML5画布上的图像?

来自分类Dev

通过从图像中心旋转并缩放来拉直HTML5画布中的图像

来自分类Dev

如何在具有更好插值的html5画布上缩放图像?

来自分类Dev

如何在不缩放的情况下使用HTML5画布翻转图像

来自分类Dev

画布HTML5中绘制图像对象的限制区域

来自分类Dev

列表内的HTML5 Canvas,无法在所有画布上绘制图像

来自分类Dev

为什么HTML5 drawImage无法在画布上绘制图像?

来自分类Dev

如何在画布上分层绘制图像?

来自分类Dev

如何使用JavaScript对图像进行动画处理使其在HTML5画布中旋转?

来自分类Dev

如何在HTML5画布上使用图像而不在页面上预先放置图像?

来自分类Dev

使用javascript在html5中绘制图像

来自分类Dev

在HTML5画布上绘制多个图像有时不起作用

来自分类Dev

HTML5画布叠加图像

来自分类Dev

HTML5画布图像变色

来自分类Dev

HTML5画布-带边框的图像拼贴

来自分类Dev

缩放HTML5画布图像

来自分类Dev

HTML5画布图像上的插图阴影

来自分类Dev

HTML5画布-带边框的图像拼贴

来自分类Dev

HTML5画布图像变色

Related 相关文章

热门标签

归档