gpt4 book ai didi

javascript - 单击时水平旋转图像

转载 作者:太空宇宙 更新时间:2023-11-04 13:51:53 26 4
gpt4 key购买 nike

这可以垂直工作,但我试图通过单击图像来水平旋转。想不通!或者也可能有更简单的方法。

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

谢谢!

最佳答案

您可以通过简单的数学逻辑将图像旋转到任意 Angular 。例如,如果你想将图像旋转 90 度。只需使用:

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

您可以在上面的代码中设置您想要的 Angular 并旋转图像。

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

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();
}

关于javascript - 单击时水平旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22175505/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com