这篇文章给大家分享的是有关在html5中如何使用Canvas帧动画吃苹果小游戏的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

代码如下

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>帧动画</title></head><body><canvasid="canvas"width="400"height="300"></canvas><divclass=""><buttonclass="start-btn"type="button">重新吃</button><buttonclass="end-btn"type="button">不吃了</button><buttonclass="pause-btn"type="button">歇一歇</button><buttonclass="continue-btn"type="button">继续吃</button></div><scripttype="text/javascript">constcanvas=document.getElementById("canvas")canvas.style.border="1pxsolidblack"constctx=canvas.getContext("2d")constimg=newImage()//创建图片对象lettimer//定时器标识符letmillisec=300//执行时间间隔letcolIndex=0//列数letrowIndex=0//行数consttimerFun=()=>{//声明定时器执行函数console.log("设置定时器");ctx.clearRect(0,0,canvas.style.width,canvas.style.height)//清除画布if(rowIndex<3){//如果是前5帧ctx.drawImage(img,colIndex*240,rowIndex*240,200,200,50,50,200,200)//图片对象，x坐标，y坐标（注：图片上定位的坐标），width，height（图片上截取的大小），x坐标，y坐标（注：图片在画布上的起点，即左上角），width，height（缩放，不是裁剪）colIndex++//下一帧if(colIndex>4){colIndex=0rowIndex++}}else{colIndex=0rowIndex=0}}img.onload=()=>{timer=setInterval(timerFun,millisec)}img.src="image/apple.jpg"conststartBtn=document.getElementsByClassName('start-btn')[0]constendBtn=document.getElementsByClassName('end-btn')[0]constpauseBtn=document.getElementsByClassName('pause-btn')[0]constcontinueBtn=document.getElementsByClassName('continue-btn')[0]startBtn.addEventListener('click',()=>{console.log("点击开始",timer)clearInterval(timer)colIndex=0//列数rowIndex=0//行数timer=setInterval(timerFun,millisec)})endBtn.addEventListener('click',()=>{console.log("点击结束",timer)clearInterval(timer)colIndex=0rowIndex=0ctx.drawImage(img,colIndex*240,rowIndex*240,200,200,50,50,200,200)timer=0})pauseBtn.addEventListener('click',()=>{console.log("点击暂停",timer)clearInterval(timer)timer=0})continueBtn.addEventListener('click',()=>{if(timer){alert('吃着呢，别催')return}console.log("点击继续",timer)timer=setInterval(timerFun,millisec)})</script></body></html>

感谢各位的阅读！关于“在html5中如何使用Canvas帧动画吃苹果小游戏”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！