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

Question

I have an HTML5 canvas which contains an image. 我有一个包含图像的HTML5画布。 Now I want to rotate this canvas by x degrees. 现在，我想将此画布旋转x度。

What I did was: 我所做的是：

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;

This code does not work correctly. 此代码无法正常工作。

How can I define a rotate function to rotate a canvas? 如何定义旋转画布的旋转功能？

Edit: I do not want to use css because I need the canvas for further processing. 编辑：我不想使用CSS，因为我需要画布进行进一步处理。

Answer 1

Rotating the canvas can be done with CSS, but that might mess up your page design if the canvas is rectangular rather than square. 可以使用CSS来完成画布的旋转，但是如果画布是矩形而不是正方形，则可能会使页面设计混乱。

It's probably better to rotate your image on the canvas. 最好在画布上旋转图像。

Clear the existing canvas. 清除现有的画布。
Translate to the rotation point--x=image.x+image.width/2,y=image.y+image.height/2. 平移到旋转点-x = image.x + image.width / 2，y = image.y + image.height / 2。
Rotate. 旋转。
drawImage(image,-image.width/2,-image.height/2 的drawImage（图像，-image.width / 2，-image.height / 2

Example code and a Demo: http://jsfiddle.net/m1erickson/8uRaL/ 示例代码和演示： http : //jsfiddle.net/m1erickson/8uRaL/

BTW, the radians for your desired angles are: 顺便说一句，所需角度的弧度为：

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

Example code: 示例代码：

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

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

问题描述

1 个解决方案

解决方案1
5 已采纳 2014-06-03 00:31:35

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

问题描述

1 个解决方案

解决方案1 5 已采纳 2014-06-03 00:31:35

解决方案1
5 已采纳 2014-06-03 00:31:35