在画布中垂直旋转图像

如何仅使用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

在画布中垂直旋转图像

回答

相关问题