帧动画的简单写法

最新推荐文章于 2023-07-08 11:58:15 发布

爱生活，爱编程

最新推荐文章于 2023-07-08 11:58:15 发布

阅读量534

点赞数

分类专栏：百度t7前端

本文链接：https://blog.csdn.net/qq_15009739/article/details/82809557

版权

百度t7前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

慕课- Python Flask高级编程

任何事情都是很简单，只要基本工扎实

所谓的行业，就是就是一大堆简单的东西堆起来的

何况我们只能从最基本的开始构建，迭代式的构建知识体系？？

首先看图片：

2，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>帧动画的简单写法</title>
	<style>
			#c1{
				border: 1px solid;
			}
	</style>

	<script>
		
	 	window.onload = function(){
	 		var c1 = document.getElementById('c1')
	 		var ctx= c1.getContext('2d')
	 		var canvasWidth = ctx.canvas.width;
	 		var canvasHeigh = ctx.canvas.height;

	 		var img = new Image();
	 		img.onload = function(){
		 		var imgWidth = img.width;
		 		var imgHeight = img.height;
		 		var personWidth = imgWidth/4;
		 		var personHeight = imgHeight/4;
		 		var x0 = canvasWidth/2 - personWidth/2;
		 		var y0 = canvasHeigh/2 - personHeight/2;
		 		var timer =null;
		 		var index = 0;
		 		c1.onmouseover = function(){
		 			ctx.drawImage(img,0,0,personWidth,personHeight,x0,y0,personWidth,personHeight)	
		 			clearInterval(timer)
		 			timer = setInterval(function(){
		 				ctx.clearRect(0,0,canvasWidth,canvasHeigh);
		 			
		 				index++;
						ctx.drawImage(img,index*personWidth,0,personWidth,personHeight,x0,y0,personWidth,personHeight);
						if(index>=3){
							index = 0;
						}			 				
		 			},300)
		 		
		 		}	

		 		c1.onmouseout = function(){
		 			alert('sdf')
		 		
		 		}

		 		

	 		}
	 		img.src = "image/04.png"
	 	}

	</script>
</head>
<body>
	
	<canvas id="c1"  width="500" height="500"></canvas>

</body>
</html>

效果：

在画布中间将小人画出来，然后，当鼠标移入的时候，就开始开个定时器，不停的换图片

移除就结束定时器！

爱生活，爱编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
帧动画的简单写法

慕课- Python Flask高级编程任何事情都是很简单，只要基本工扎实所谓的行业，就是就是一大堆简单的东西堆起来的何况我们只能从最基本的开始构建，迭代式的构建知识体系？？首先看图片： 2，代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset=...
复制链接

扫一扫

专栏目录