利用canvas绘制旋转缩放动画和其中的一些小坑

最新推荐文章于 2024-04-21 18:36:16 发布

可可爱爱小康一

最新推荐文章于 2024-04-21 18:36:16 发布

阅读量451

点赞数

分类专栏： HTM5 文章标签： html5

本文链接：https://blog.csdn.net/weixin_43073298/article/details/106864291

版权

HTM5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

canvas旋转缩放效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			canvas{
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				margin: auto;
				background: lavenderblush;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="600" height="600"></canvas>
	</body>
	<script type="text/javascript">
		window.onload = function  () {
			//获取canvas对象
			var canvas = document.querySelector('#canvas');
			//旋转角度变量
			var angle = 0;
			//缩放倍数分母变量
			var s = 0;
			var flag = 1;
			//判断是否支持绘制
			if(!canvas.getContext)return;
			//获取绘制对象
			var ctx = canvas.getContext('2d');
			//设置定时器开启无限动画
			setInterval(function  () {
				//清除画布
				ctx.clearRect(0,0,canvas.width,canvas.height);
				//旋转角度变量变化
				angle += 10;
				if (angle == 360) {
					angle = 0;
				}
				//保存样式
				ctx.save();
				//开启新路径
				ctx.beginPath();
				//设置样式,样式一定要设置在save和beginPath之后，restore之前(也要在绘制之前)，可以避免很多麻烦
				//移动图形原点到画布中心点
				ctx.translate(300,300);
				ctx.fillStyle = '#a450aa';
				//旋转
				ctx.rotate(angle*Math.PI/180);
				//缩放
				s += flag ;
				if (s == 20) {
					flag = -1;
				} else if(s == 0 ){
					flag = 1
				}
				ctx.scale(s/10,s/10);
				//绘制图像并回正
				ctx.fillRect(-100,-100,200,200);	
				console.log(angle);
				//恢复样式
				ctx.restore();	
			},100)
		}
	</script>
</html>

	***在使用canvas绘制图形的时候，最好是先写上 save,beginPath,restore这三个方法，然后把整体的样式和图形
绘制代码放在save和beginPath之后，restore之前，然后样式也要写在图形绘制代码之前。***
	原因：这就要涉及到样式栈和样式容器的概念了，类似于堆内存和栈内存，你设置样式之后的样式是放在样式容器里面
的，save之后颜色才会放到样式栈里面，后续你绘制图形的时候，你如果没有重新设置样式，会一直默认使用这个颜色。
	所以最好是先用save保存一遍默认颜色，然后再beginPath开启新的路径，清空之前存在的样式，然后绘制完一个图形之后，再用restore
方法弹出刚刚设置的样式，恢复默认样式，以确保新绘制的图形不会受到之前效果的影响。
其实这些理论也可以不用理会，记住结论就好了(第一段)。
	东西都是很基础的东西，主要是记录一些坑，提醒自己的同时也希望能帮到一些小伙伴。

可可爱爱小康一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用canvas绘制旋转缩放动画和其中的一些小坑

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> canvas{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; ba.
复制链接

扫一扫