canvas——rotate_ctx.rotate-优快云博客

本文通过三个实例展示了如何使用HTML5 Canvas实现图像的旋转动画效果。包括围绕固定点旋转、围绕图像中心旋转以及多重旋转效果，每个实例都详细介绍了具体实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		canvas{
			background: #ddd;
		}
	</style>
</head>
<body>
	<canvas id="c2" width="500" height="400"></canvas>
	<script>
		//canvas元素变形
		var c2=document.getElementById('c2');
		var ctx=c2.getContext('2d');
		
		var img=new Image();
		img.src='img/canvas.jpg';
		img.onload=function(){
			ctx.translate(250,200);
			ctx.drawImage(img,0,0);
		}
		function xz(){
			//绕圆点旋转
			ctx.clearRect(0,0,500,400);
			ctx.rotate(15*Math.PI/180);
			ctx.drawImage(img,0,0);
		}

		setInterval("xz()",1000);

		//或用这种方式实现
		/*var timer=setInterval(function(){
			...
		},1000);*/
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		canvas{
			background: #ddd;
		}
	</style>
</head>
<body>
	<canvas id="c2" width="500" height="400"></canvas>
	<script>
		//canvas元素变形
		var c2=document.getElementById('c2');
		var ctx=c2.getContext('2d');
		
		var img=new Image();
		img.src='img/canvas.jpg';
		img.onload=function(){
			ctx.translate(250,200);
			ctx.drawImage(img,-img.width/2,-50);
		}
		function xz(){
			//绕自己的中心旋转
			ctx.clearRect(0,0,500,400);
			ctx.rotate(15*Math.PI/180);
			ctx.drawImage(img,-img.width/2,-50);
		}

		setInterval("xz()",1000);

		//或用这种方式实现
		/*var timer=setInterval(function(){
			...
		},1000);*/
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		canvas{
			background: #ddd;
		}
	</style>
</head>
<body>
	<canvas id="c2" width="500" height="400"></canvas>
	<script>
		//canvas元素变形
		var c2=document.getElementById('c2');
		var ctx=c2.getContext('2d');
		
		var img=new Image();
		img.src='img/canvas1.jpg';
		img.onload=function(){
			ctx.translate(250,200);
			ctx.drawImage(img,0,0);
		}

		deg1=0;
		deg2=0;
		function xz(){
			//绕自己的中心旋转
			ctx.clearRect(0,0,500,400);
			console.log("xz");
			ctx.save();
			deg1+=15;
			ctx.rotate(deg1*Math.PI/180);
			ctx.drawImage(img,-50,-50);
			ctx.restore();

			deg2+=20;
			ctx.save();
			ctx.rotate(deg2*Math.PI/180);
			ctx.drawImage(img,0,0);
			ctx.restore();
		}

		setInterval("xz()",1000);

		//或用这种方式实现
		/*var timer=setInterval(function(){
			...
		},1000);*/
	</script>
</body>
</html>