如何使针图像从180度旋转到0度，即360度的一半
<!DOCTYPE html>
<html>
<head>
<title>Canvas Cog</title>
<script type="text/javascript">
var cog = new Image();
function init() {
cog.src = 'needle.png'; // Set source path
setInterval(draw,100);
}
var rotation = 0;
function draw(){
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
ctx.save();
ctx.clearRect(0,0,500,500);
ctx.translate(200,180); // to get it in the origin
rotation +=1;
ctx.rotate(rotation*Math.PI/180); //rotate in origin
ctx.translate(0,-90); //put it back
ctx.drawImage(cog,(-13.5),(-13.5),48,111);
ctx.restore();
}
init();
</script>
</head>
<body>
<canvas width="500" height="500" id="myCanvas"></canvas>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Canvas Cog</title>
<script type="text/javascript">
var cog = new Image();
function init() {
cog.src = 'needle.png'; // Set source path
setInterval(draw,100);
}
var rotation = 0;
function draw(){
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
ctx.save();
ctx.clearRect(0,0,500,500);
ctx.translate(200,180); // to get it in the origin
rotation +=1;
ctx.rotate(rotation*Math.PI/180); //rotate in origin
ctx.translate(0,-90); //put it back
ctx.drawImage(cog,(-13.5),(-13.5),48,111);
ctx.restore();
}
init();
</script>
</head>
<body>
<canvas width="500" height="500" id="myCanvas"></canvas>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
使用 HTML5 Canvas - 绕任意点旋转图像
using HTML5 Canvas - rotate image about arbitrary point