在畫布中垂直旋轉圖像

如何僅使用Canvas（無WebGL等）垂直旋轉圖像？在畫布中垂直旋轉圖像

我在看CSS3中的-webkit-transform: rotateY();之類的東西。

來源

2013-03-19 Siper

[編輯：哎呀！我想我誤解了你的問題。你想用3D效果翻轉，只是沒有webGL。]

是的，你可以在沒有webGL的情況下在畫布上進行3D旋轉。

幾個帆布庫提供3D畫布旋轉......

看一看，K3D（NICE效果！）：http://www.kevs3d.co.uk/dev/canvask3d/k3d_test.html

看看使用GreenSock：http://www.greensock.com/css3/

如果你不」 t想任何庫，檢查出K3D。它的許可證非常寬鬆，可以讓你取出你需要的旋轉代碼。

。

[我原來以下答案可能偏離軌道的你想要什麼 - 但我會離開這裏反正]

下面是如何垂直翻轉畫布圖像

當你想翻轉垂直，你諷刺地是在水平軸上翻轉。

要翻轉你用context.scale這樣橫軸：

context.scale(1,-1); // flip vertically--using the HORIZONTAL axis !

這裏的代碼和一個小提琴：http://jsfiddle.net/m1erickson/JBCGC/

<!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 canvasH=document.getElementById("canvasH"); 
    var ctxH=canvasH.getContext("2d"); 

    var img=new Image(); 
    img.onload=function(){ 
     // flip on the horizontal axis 
     // (causes upside down) 
     canvasH.width=img.width; 
     canvasH.height=img.height; 
     ctxH.save(); 
     ctxH.scale(1,-1); 
     ctxH.translate(0,-img.height); 
     ctxH.drawImage(img,0,0); 
     ctxH.restore(); 
    } 
    img.src="http://dl.dropbox.com/u/139992952/houseIcon.png"; 


}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvasH" width=300 height=300></canvas> 
</body> 
</html>

來源

2013-03-19 17:43:40 markE

-1

你可以試試這個 -

// translate context to center of canvas 
    context.translate(canvas.width/2, canvas.height/2); 

    // rotate 45 degrees clockwise 
    context.rotate(Math.PI/4);

的旋轉轉變需要弧度的角度。 Reference

來源

2013-03-19 16:42:38 svineet

這並不是說。我必須在Y軸上旋轉上下文，而不是順時針旋轉。 – Siper 2013-03-19 16:54:13

-1

我喜歡@markE答案，只是想我會發布這一個也是如此。它允許您將圖像旋轉到任何需要的角度。

function rotate(angle) { 
    ctxH.clearRect(0, 0, width, height); 
    ctxH.save(); 
    ctxH.translate(width/2, height/2); 
    ctxH.rotate(angle * Math.PI/180); 
    ctxH.drawImage(img, -width/2, -height/2); 
    ctxH.restore(); 
}

markE's Modified Demo (with animation)

來源

2013-03-19 18:37:58 Loktar

在畫布中垂直旋轉圖像

回答

相關問題