Javascript 如何将包含图像的画布旋转90度、180度、270度？_Javascript_Html_Canvas_Rotation

Javascript 如何将包含图像的画布旋转90度、180度、270度？

javascript html canvas

Javascript 如何将包含图像的画布旋转90度、180度、270度？,javascript,html,canvas,rotation,Javascript,Html,Canvas,Rotation,我有一个HTML5画布，其中包含一个图像。现在我想将画布旋转x度我所做的是： function getRadianAngle(degreeValue) { return degreeValue * Math.PI / 180; } var rotateCanvas = function(canvas, image, degrees) { var context = canvas.getContext('2d'); context.rotate(getRadianAngle(

我有一个HTML5画布，其中包含一个图像。现在我想将画布旋转x度

我所做的是：

function getRadianAngle(degreeValue) {
    return degreeValue * Math.PI / 180;
} 

var rotateCanvas = function(canvas, image, degrees) {
  var context = canvas.getContext('2d');
  context.rotate(getRadianAngle(degrees));
  context.drawImage(image, 0, 0);
  return canvas;            
}

var image = new Image();
image.onload = function() {
   var canvas = document.createElement("canvas");
   var context = canvas.getContext('2d');
   var cw = canvas.width = image.width;
   var ch = canvas.height = image.height;
   context.drawImage(image, 0, 0, image.width, image.height);

   rotateCanvas(canvas, image, 180);
}
image.src = // some image url;

此代码无法正常工作

如何定义旋转函数来旋转画布？

编辑：我不想使用css，因为我需要画布进行进一步处理

旋转画布可以通过CSS来完成，但是如果画布是矩形而不是正方形，这可能会打乱页面设计

在画布上旋转图像可能更好

清除现有画布
平移到旋转点--x=image.x+image.width/2，y=image.y+image.height/2
轮换
drawImage（图像，-image.width/2，-image.height/2

示例代码和演示：

顺便说一句，所需角度的弧度为：

0度==0弧度
90度==Math.PI/2弧度
180度==Math.PI弧度
270度==数学PI*3/2弧度

示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

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

    var radians=0;

    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/cat.png";
    function start(){
        animate();
    }


    function animate(){
        requestAnimationFrame(animate);
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.save();
        ctx.translate(canvas.width/2,canvas.height/2);
        ctx.rotate(radians);
        ctx.drawImage(img,-img.width/2,-img.height/2);
        ctx.restore();
        radians+=Math.PI/180;
    }


}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var弧度=0；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/cat.png";
函数start（）{
制作动画（）；
}
函数animate（）{
请求动画帧（动画）；
clearRect（0,0，canvas.width，canvas.height）；
ctx.save（）；
ctx.translate（canvas.width/2，canvas.height/2）；
ctx.旋转（弧度）；
ctx.图纸图像（img，-img.宽度/2，-img.高度/2）；
ctx.restore（）；
弧度+=Math.PI/180；
}
})；//end$（函数（）{}）；

我不想使用css，因为我需要画布进行进一步处理。当然……请参阅我答案中的添加内容。干杯！