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

有没有办法通过Javascript来旋转HTML5 canvas的现有内容？我知道可以旋转将要绘制到画布上的图像，但是我想要将已绘制的内容旋转到画布上，例如，400x400画布的200x200边角或现有画布的任何特定区域。如何旋转HTML5画布的现有内容？

同样的问题，以扩大现有的帆布内容...

我知道getImageData/putImageData提供了潜在的改造像素阵列，但它只是过于缓慢，效率低下。

来源

2011-12-15 Tony T

如果您首先想绘制canvas，然后旋转它以便在例如你可以在你“克隆”画布或使用CSS的时候做到这一点。

实例

获取第一画布元件：

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();

它克隆到另一画布（由CSS旋转）：

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);

这里是旋转它的CSS：

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

enter image description here

下面是完整的例子：

<!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>

来源

2011-12-15 09:50:10 Jonas

我不要以为这是真正的OP，他想旋转和缩放那些已经画在那里的画布的一部分，并且我假定把它放回o在现有的画布上。他也想用JS而不是CSS来做。现在的问题是，旋转后的画布上的所有内容都会旋转。 – Loktar 2011-12-15 17:23:02

使用临时画布很容易。

Live Demo

Live Demo Animated（只为它赫克）

上面示例绘制2盒，然后转动，并且秤从0,0到200200

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();

来源

2011-12-15 17:14:46 Loktar

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

回答

相关问题