顺时针旋转画布90度并更新宽度高度

时间:2013-05-20 08:51:46

标签: javascript image-processing canvas

假设我们有画布:

<canvas id="one" width="100" height="200"></canvas>

然后在按钮上单击画布顺时针旋转90度(围绕中心),画布的尺寸也会更新,所以在某种意义上它后面看起来像这样:

<canvas id="one" width="200" height="100"></canvas>

请注意,画布的id是相同的。

想象一下,只需顺时针旋转图像而不进行裁剪或填充。

在我创建新画布并逐个像素地旋转和复制之前,我有什么建议吗?

更新示例代码,评论中的建议仍然无效:

function imageRotatecw90(){

    var canvas = document.getElementById("one");
    var context = canvas.getContext("2d");

    var cw=canvas.width;
    var ch=canvas.height;

    var myImageData = context.getImageData(0,0, cw,ch);

    context.save();

    context.translate(cw / 2, ch / 2);
    context.rotate(Math.PI/2);

    context.putImageData(myImageData, 0, 0);

    context.restore();

    canvas.width=ch;
    canvas.height=cw;
}

FiddleJS

2 个答案:

答案 0 :(得分:9)

看看这个DEMO

为了实现在demo中看到的结果,我使用canvas.toDataURL将画布缓存到图像中,然后将画布重置为新的尺寸,正确平移和旋转上下文,最后将缓存的图像绘制回来修改画布。

这样您就可以轻松旋转画布而无需再次重绘所有内容。但是由于浏览器使用anti-aliasing方法,每次执行此操作时,您会发现结果有些模糊。如果你不喜欢这种行为,我能想出的唯一解决方案是再次绘制所有内容,更难以跟踪。

以下是代码:

var canvas = document.getElementById("one");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

// Sample graphic
context.beginPath();
context.rect(10, 10, 20, 50);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();

// create button
var button = document.getElementById("rotate");
button.onclick = function () {
    // rotate the canvas 90 degrees each time the button is pressed
    rotate();
}

var myImageData, rotating = false;   

var rotate = function () {
    if (!rotating) {
        rotating = true;            
        // store current data to an image
        myImageData = new Image();
        myImageData.src = canvas.toDataURL();

       myImageData.onload = function () {
            // reset the canvas with new dimensions
            canvas.width = ch;
            canvas.height = cw;
            cw = canvas.width;
            ch = canvas.height;

            context.save();
            // translate and rotate
            context.translate(cw, ch / cw);
            context.rotate(Math.PI / 2);
            // draw the previows image, now rotated
            context.drawImage(myImageData, 0, 0);               
            context.restore();

            // clear the temporary image
            myImageData = null;

            rotating = false;               
        }
    }
}

答案 1 :(得分:1)

轮换

请注意,无法旋转单个元素。

ctx.save();
ctx.rotate(0.17);

// Clear the current drawings.
ctx.fillRect()

// draw your object
ctx.restore();

宽度/高度调整

我找到正确处理显示比例,屏幕尺寸等的唯一方法:

canvas.width = 20;// DO NOT USE PIXELS
canvas.height = 40; // AGAIN NO PIXELS

注意我故意使用canvas.style.widthcanvas.style.height。另外对于可调整的画布不依赖于CSS或媒体查询来进行转换,由于像素比率的差异,它们很令人头疼。 JavaScript会自动解释这些问题。

<强>更新

您还必须在绘制前更新宽度和高度。不确定你想要达到的目标,但我想这不是问题:

Demo here

var canvas = document.getElementById("one");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

canvas.width = 200;
canvas.height = 400;

// Sample graphic
context.beginPath();
context.rect(10,10,20,50);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();


var myImageData = context.getImageData(0, 0, cw, ch);

context.save();

context.translate(cw / 2, ch / 2);
context.putImageData(myImageData, 0, 0);
context.rotate(0.20);