如何旋转 HTML5 画布的现有内容？
Posted
技术标签:
【中文标题】如何旋转 HTML5 画布的现有内容？【英文标题】：How to rotate the existing content of HTML5 canvas? 【发布时间】：2012-01-21 00:26:31 【问题描述】：有没有办法通过 javascript 来旋转 html5 画布的现有内容？我知道可以旋转将要绘制到画布上的图像，但我想旋转已绘制到画布上的内容，例如 400x400 画布的 200x200 角，或现有画布的任何特定区域.
缩放现有画布内容的相同问题...
我知道 getImageData/putImageData 提供了转换像素数组的潜力，但它太慢且效率低下。
【问题讨论】：
【参考方案1】：使用临时画布非常容易。
Live Demo
Live Demo Animated（只是为了它）
上面的例子画了 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();
【讨论】：
【参考方案2】：如果您首先要在 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);
这里是完整的例子：
<!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" ></canvas>
<canvas id="canvas2" ></canvas>
<canvas id="canvas3" ></canvas>
</body>
</html>
【讨论】：
我不认为这真的是 OP 所追求的，他想旋转和缩放已经在那里绘制的画布的一部分，我假设将它放回现有画布上。他也想用JS而不是CSS来做。现在按您的方式进行操作的问题是旋转的画布上的所有内容都已旋转。 谢谢！我正在考虑旋转整个图像，这对于让我到达那里至关重要！以上是关于如何旋转 HTML5 画布的现有内容？的主要内容，如果未能解决你的问题，请参考以下文章