JavaScript旋轉

我需要在將圖像加載到畫布之前旋轉圖像。據我所知，我不能使用canvas.rotate（）旋轉它，因爲它會旋轉整個場景。JavaScript旋轉

是否有一個很好的JS方式來旋轉圖像？ [不依賴於瀏覽器的方式]

2012-09-18 RandomClown

您可以在CSS旋轉它 - http://answers.oreilly.com/topic/1004-how-to-rotate-an-image-with-css/ – rodzyn

是啊，但這是一個瀏覽器依賴的方式。我正在尋找一種JavaScript方式。 – RandomClown

不準確，你可以保存場景，旋轉然後映像還原現場：

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

來源

2012-09-18 08:10:57

以及爲u可以使用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-19 21:52:33 user3013823

回答

相關問題