Javascript 单击后水平旋转图像_Javascript_Jquery_Css

Javascript 单击后水平旋转图像

javascript jquery css

Javascript 单击后水平旋转图像,javascript,jquery,css,Javascript,Jquery,Css,这是垂直的，但我试图通过点击图片来水平旋转。我想不出来！或者也有一种更简单的方法 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Flip Image</title> <style> canvas{border:1px solid #333}

这是垂直的，但我试图通过点击图片来水平旋转。我想不出来！或者也有一种更简单的方法

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flip Image</title>
        <style>
            canvas{border:1px solid #333}
            img{display:none;}
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">      </script>
        <script type="text/javascript">
            $(window).load(function(){

                var immagine = $('img')[0]
                alt=immagine.height
                lar=immagine.width
                $('<canvas width="'+lar+'" height="'+alt+'"></canvas>').appendTo('body')
                var ca=$('canvas').get(0)
                ctx=ca.getContext('2d')
                ctx.drawImage(immagine, 0, 0);

                $('canvas').click(function(){
                    ctx.translate(lar-1, alt-1);
                    ctx.rotate(Math.PI);
                    ctx.drawImage(immagine, 0, 0, lar, alt);
                 })

            })
        </script>
    </head>
    <body>
        <!-- onclick rotate image horizontally-->
        <img src="myimage.jpg">

        <br><Br>

    </body>
</html>


翻转图像
画布{边框：1px实心#333}
img{显示：无；}
$（窗口）。加载（函数（）{
变量immagine=$（'img'）[0]
alt=发动机高度
lar=发动机内部宽度
$（''）.appendTo（'正文'）
var ca=$（'canvas'）。获取（0）
ctx=ca.getContext（'2d'）
ctx.drawImage（immagine，0,0）；
$（'canvas'）。单击（函数（）{
ctx.translate（lar-1，alt-1）；
旋转（数学PI）；
ctx.drawImage（immagine，0，0，lar，alt）；
})
})

谢谢

只需一个简单的数学逻辑，就可以将图像旋转到任何角度。例如，如果要将图像旋转90度。只需使用：

ctx.rotate(90 * Math.PI/180);

您可以在上面的代码中设置所需的角度并旋转图像

更新我正在根据您的需要添加一些代码。在画布上工作的单击，这将在一个方向上旋转图像

var angleInDegrees=0;

$('canvas').click(function(){
   angleInDegrees+=90;
    drawRotated(angleInDegrees);
 })
function drawRotated(degrees){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(canvas.width/2,canvas.height/2);
    ctx.rotate(degrees*Math.PI/180);
    ctx.drawImage(image,-image.width/2,-image.width/2);
    ctx.restore();
}

我同意拉杰什的意见，你可以设定你的角度，然后根据之前的翻译进行旋转。有时我更喜欢使用webkit而不是canvas。这是一个使用CSS webkit水平旋转的提琴，在我看来要简单得多。

检查JSFIDLE是否有帮助

.imageRotateHorizontal{
    -moz-animation: spinHorizontal .8s infinite linear;
    -o-animation: spinHorizontal .8s infinite linear;    
    -webkit-animation: spinHorizontal .8s infinite linear;
    animation: spinHorizontal .8s infinite linear;
}

@keyframes spinHorizontal {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

这可能会有所帮助，这是否会改变旋转方向？你尝试了什么角度？一点也没有改变，你能举个例子说明你在说什么吗？谢谢，当我们做

ctx.rotate（90*Math.PI/180）时，这意味着您正在尝试将图像旋转90度。如果你想改变角度，说170度。你可以通过ctx.rotate（170*Math.PI/180）来实现。如果这个方法不起作用，试着在ctx.translate（lar-1，alt-1）中更改cordinate转到其他内容，然后旋转。查看问题了解更多信息。我这样做了，当我单击它时，我注意到背景上有东西在移动，但主图像没有移动。但这不是我要找的，我有一个垂直显示的图像，我想单击它，并将其水平显示。嗯，我把它弄糊涂了，因为它是相对于y轴翻转的。然后您可以使用-webkit transform:rotate（90度）没有Y。如果存在浏览器兼容性问题，它在Firefox中也能工作。只需确保添加-moz-transform、-ms-transform、-o-transform和transform，每个值都相同即可。它更可靠，响应性更好。
.imageRotateHorizontal{
    -moz-animation: spinHorizontal .8s infinite linear;
    -o-animation: spinHorizontal .8s infinite linear;    
    -webkit-animation: spinHorizontal .8s infinite linear;
    animation: spinHorizontal .8s infinite linear;
}

@keyframes spinHorizontal {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}