canvas的旋转和缩放

最新推荐文章于 2025-05-14 12:34:36 发布

ccoo233

最新推荐文章于 2025-05-14 12:34:36 发布

阅读量281

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ccoo233/article/details/82802496

1.旋转加缩放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>旋转加缩放的小方块</title>
		<style>
			body{
				background: black;
			}
			canvas{
				background: #fff;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="400" height="400">
			
		</canvas>
		<script>
			var oC = document.getElementById("canvas")
			var oGC = oC.getContext("2d")
			var num = 0
			var num2 = 0
			var value = 1
			
			setInterval(function(){//设置一个定时器
				num++
				if(num2==200){
					value=-1
				}else if(num2==0){
					value = 1
				}
				num2+=value
				oGC.save()//保存路径
				oGC.beginPath()
				oGC.clearRect(0,0,oC.width,oC.height)//删除一个矩形画布
				oGC.translate(200,200)//平移
				oGC.scale(num2/50,num2/50)//渐渐放大和缩小
				oGC.rotate(num*Math.PI/180,num*Math.PI/180)//旋转
				oGC.translate(-50,-50)
				oGC.fillRect(0,0,100,100)
				oGC.closePath()
				oGC.restore()//回复路径
			},30)
		</script>
	</body>
</html>

一.获取到画布并设置2d环境。

二.因为要设置定时器所有先设置几个变量。

三.设置一个定时器。

四.先让num++做一个判断num2最大200px（控制缩放大小）。

五.保存路径和回复路径，开始路径和闭合路径。

六.删除画布将阴影删除。

七.将num2带入scale实现缩放。

八.将num带入rotate实现旋转。