Javascript 如何旋转HTML5画布的现有内容？
有没有办法通过Javascript旋转HTML5画布的现有内容？我知道可以旋转将绘制到画布上的图像，但我希望旋转已绘制到画布上的内容，例如，400x400画布的200x200角，或现有画布的任何特定区域 同样的问题来缩放现有画布内容Javascript 如何旋转HTML5画布的现有内容？,javascript,html,canvas,rotation,html5-canvas,Javascript,Html,Canvas,Rotation,Html5 Canvas,有没有办法通过Javascript旋转HTML5画布的现有内容？我知道可以旋转将绘制到画布上的图像，但我希望旋转已绘制到画布上的内容，例如，400x400画布的200x200角，或现有画布的任何特定区域 同样的问题来缩放现有画布内容 我知道getImageData/putImageData提供了一种转换像素阵列的可能性，但它太慢、效率太低。如果您首先要在画布上绘制，然后将其旋转以在角上使用，则可以在“克隆”画布或使用CSS时使用 示例 获取第一个画布元素： var canvas = docume
我知道getImageData/putImageData提供了一种转换像素阵列的可能性，但它太慢、效率太低。如果您首先要在
画布上绘制，然后将其旋转以在角上使用，则可以在“克隆”画布或使用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旋转）：
或在“克隆”画布时旋转画布：
以下是用于旋转的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" width="50" height="50"></canvas>
<canvas id="canvas2" width="50" height="50"></canvas>
<canvas id="canvas3" width="50" height="50"></canvas>
</body>
</html>
window.onload=函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle='蓝色'；
ctx.fillRect（0,0,25,5）；
ctx.fill（）；
ctx.fillStyle='红色'；
ctx.fillRect（25,0,25,5）；
ctx.fill（）；
var ctx2=document.getElementById（“canvas2”）.getContext（“2d”）；
ctx2.drawImage（画布，0,0）；
var ctx3=document.getElementById（“canvas3”）.getContext（“2d”）；
ctx3.旋转（数学PI/2）；
ctx3.翻译（0，-50）；
ctx3.drawImage（画布，0,0）；
}
#游说{
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-o变换：旋转（90度）；
-ms变换：旋转（90度）；
}
使用临时画布非常容易
（仅供参考）
上面的示例绘制了两个框，然后从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();
我不认为这是OP真正想要的，他想要旋转和缩放已经在那里绘制的画布的一部分，我假设将其放回现有的画布上。他还想用JS而不是CSS来做。按你的方式做的问题是现在旋转画布上的所有东西都被旋转了。谢谢！我在看旋转的整个图像，这是必不可少的，让我到那里！
<!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>
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();