任何事情都是很简单，只要基本工扎实
所谓的行业，就是就是一大堆简单的东西堆起来的
何况我们只能从最基本的开始构建，迭代式的构建知识体系？？
首先看图片：
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>效果：
在画布中间将小人画出来，然后，当鼠标移入的时候，就开始开个定时器，不停的换图片
扫描二维码关注公众号，回复：
3471217 查看本文章
移除就结束定时器！