1

在将图像加载到画布之前，我需要旋转它。据我所知，我无法使用 canvas.rotate() 旋转它，因为它会旋转整个场景。

有没有很好的 JS 方法来旋转图像？[不是浏览器依赖的方式]

4

2 回答 2

2

不完全是，您可以保存场景，旋转图像然后恢复场景：

var canvas = document.getElementById('canvas');
canvas.width = 600; 
canvas.height = 400; 
var ctx = canvas.getContext('2d'); 
var image = new Image();
image.src = 'https://www.google.ro/images/srpr/logo3w.png';
drawRotatedImage(image, 275, 95, 25); 

function drawRotatedImage(image, x, y, angle) { 
    ctx.save(); 
    ctx.translate(x, y);
    ctx.rotate(angle * (Math.PI/180));
    ctx.drawImage(image, -(image.width/2), -(image.height/2));
    ctx.restore(); 
}

JSFiddle 示例

于 2012-09-18T08:10:57.893 回答
0

好吧，你可以使用 css 属性转换来旋转、缩放和翻译 html 元素，而不是使用画布，如果你想将图像旋转 x 度以连续旋转图像，你应该使用 transform="rotate(xdeg)" 使用以下代码。看到这个你的代码

<html>
<img id="t1" src="1.png">
</html>
and this is your javascript code
<script>
    var im;
    var w,h;
    var t=0;
    window.onload=function()
    {
     im=document.getElementById('t1');
     w=im.width;
     h=im.height;
         im.style.transform=im.style.webkitTransform|im.style.mozTransform|im.style.oTransform|i     m.style.transform;
     update();
    };
    function update()
    {

     im.style.transform="rotate("+t+"deg)";
     t+=10;
     setTimeout("update()",100);
    }
</script>
于 2014-07-19T21:52:33.047 回答