如何旋转HTML5画布的现有内容？

Question

Is there a way to rotate the existing content of HTML5 canvas by Javascript? 有没有办法通过Javascript旋转HTML5画布的现有内容？ I know it's possible to rotate an image that will be drawn on to canvas, but I want to rotate the content that has been drawn on to canvas, for example, a 200x200 corner of a 400x400 canvas, or any specific region of an existing canvas. 我知道可以旋转将要绘制到画布上的图像，但我想将已绘制到画布上的内容旋转，例如，400x400画布的200x200角，或现有画布的任何特定区域。

Same question to scale the existing canvas content... 缩放现有画布内容的同样问题......

I know getImageData/putImageData provide a potential to transform the pixel array, but it's just too slow and inefficient. 我知道getImageData / putImageData提供了转换像素数组的潜力，但它太慢而且效率低下。

Answer 1

It's pretty easy to do with a temp canvas. 使用临时画布很容易。

Live Demo 现场演示

Live Demo Animated (just for the heck of it) 现场演示动画 （只是为了它）

The above example draws 2 boxes, then rotates and scales from 0,0 to 200,200 上面的示例绘制了2个框，然后旋转并从0,0到200,200缩放

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = canvas.height = 400;

// fill the canvas black, and draw 2 boxes
ctx.fillStyle = "#000";
ctx.fillRect(0,0,400,400);
ctx.fillStyle = "rgb(255,0,0)";

ctx.fillRect(10,10,190,190);
ctx.fillStyle = "rgb(255,255,0)";
ctx.fillRect(250,250,90,90);

// Create a temp canvas to store our data (because we need to clear the other box after rotation.
var tempCanvas = document.createElement("canvas"),
    tempCtx = tempCanvas.getContext("2d");

tempCanvas.width = canvas.width;
tempCanvas.height = canvas.height;
// put our data onto the temp canvas
tempCtx.drawImage(canvas,0,0,canvas.width,canvas.height);

// Append for debugging purposes, just to show what the canvas did look like before the transforms.
document.body.appendChild(tempCanvas);

// Now clear the portion to rotate.
ctx.fillStyle = "#000";
ctx.fillRect(0,0,200,200);
ctx.save();
// Translate (190/2 is half of the box we drew)
ctx.translate(190/2, 0);
// Scale
ctx.scale(0.5,0.5);  
// Rotate it
ctx.rotate(45*Math.PI/180);
// Finally draw the image data from the temp canvas.
ctx.drawImage(tempCanvas,0,0,200,200,10,10,190,190);
ctx.restore();

Answer 2

If you first want to draw on a canvas and then rotate it for use on eg corners, you can to that when you "clone" the canvas or by using CSS. 如果您首先想要在canvas上绘制然后将其旋转以用于例如角落，则可以在“克隆”画布或使用CSS时进行旋转。

Examples 例子

Get the first canvas element: 获取第一个canvas元素：

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

draw on it: 借鉴它：

ctx.fillStyle = 'blue';
ctx.fillRect(0,0, 25, 5);
ctx.fill();
ctx.fillStyle = 'red';
ctx.fillRect(25, 0, 25, 5);
ctx.fill();

clone it to another canvas (that is rotated by CSS): 克隆到另一个画布（由CSS旋转）：

var ctx2 = document.getElementById("canvas2").getContext("2d");
ctx2.drawImage(canvas, 0,0);

or rotate the canvas while you "clone" it: 或者在“克隆”它时旋转画布：

var ctx3 = document.getElementById("canvas3").getContext("2d");
ctx3.rotate(Math.PI/2);
ctx3.translate(0,-50);
ctx3.drawImage(canvas, 0,0);

here is the CSS for rotating it: 这是用于旋转它的CSS：

#canvas2 {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
}

在此输入图像描述

Here is the full example: 这是完整的例子：

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = 'blue';
    ctx.fillRect(0,0, 25, 5);
    ctx.fill();
    ctx.fillStyle = 'red';
    ctx.fillRect(25, 0, 25, 5);
    ctx.fill();

    var ctx2 = document.getElementById("canvas2").getContext("2d");
    ctx2.drawImage(canvas, 0,0);

    var ctx3 = document.getElementById("canvas3").getContext("2d");
    ctx3.rotate(Math.PI/2);
    ctx3.translate(0,-50);
    ctx3.drawImage(canvas, 0,0);

}
</script>
<style>
#canvas2 {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
}
</style>
</head>
<body>
<canvas id="canvas" width="50" height="50"></canvas>
<canvas id="canvas2" width="50" height="50"></canvas>
<canvas id="canvas3" width="50" height="50"></canvas>
</body>
</html>

如何旋转HTML5画布的现有内容？

问题描述

2 个解决方案

解决方案1
11 2011-12-15 17:14:46

解决方案2
5 2011-12-15 09:50:10

如何旋转HTML5画布的现有内容？

问题描述

2 个解决方案

解决方案1 11 2011-12-15 17:14:46

解决方案2 5 2011-12-15 09:50:10

解决方案1
11 2011-12-15 17:14:46

解决方案2
5 2011-12-15 09:50:10