Question

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

是否有一种很好的JS方式来旋转图像？ [不依赖于浏览器的方式]

Answer 1

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

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 Example

Answer 2

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

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

JavaScript旋转

2 个答案: