这篇文章给大家分享的是有关html5如何使用canvas实现待机动画的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

免责声明

不是打算教 canvas，只是觉得好玩就简单看了一下。

意思就是做得略粗糙，别喷我。。

效果

帧数略低，实际当然流畅得多。

实现 HTML:

<!DOCTYPEhtml><head><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><style>*{margin:0;padding:0;}body{background-color:lightblue;}#canvas{background-color:black;width:100vw;}</style></head><body><canvasid="canvas"></canvas><script>/*见下*/</script></body>

JS:

window.onload=function(){let//画布ctx=document.getElementById('canvas').getContext('2d'),//画布大小canvas_width=document.getElementById('canvas').width,canvas_height=document.getElementById('canvas').height,//DVD图标的文本颜色、字体、背景色text_color=['green','blue','purple','yellow','white','yellow','white'],text_font='italicbold50pxyahei',background_color=['red','orange','yellow','green','blue','indigo','violet'],//背景矩形的尺寸background_width=110,background_height=50,//向矩形添加文本时，高度有点偏差fix_height=7,//速度，每次重绘移动0.5pxspeed_x=0.5,speed_y=0.5,//移动方向，初始为'r-b'右下direction='r-b',//图标x和y坐标，初始为0position_x=0,position_y=0,//碰撞次数，用来计算背景和文本颜色count=0dvd()functiondvd(){//移动方向switch(direction){//右下case'r-b':position_x+=speed_xposition_y+=speed_ybreak//右上case'r-t':position_x+=speed_xposition_y-=speed_ybreak//左下case'l-b':position_x-=speed_xposition_y+=speed_ybreak//左上case'l-t':position_x-=speed_xposition_y-=speed_ybreak}//清空画布ctx.clearRect(0,0,canvas_width,canvas_height)//重绘ctx.fillRect(position_x,position_y,background_width,background_height)//碰撞检测//底if(position_y+background_height>=canvas_height){direction=direction.replace('b','t')//碰撞次数统计count+=1}//右if(position_x+background_width>=canvas_width){direction=direction.replace('r','l')count+=1}//左if(position_x<0){direction=direction.replace('l','r')count+=1}//上if(position_y<0){direction=direction.replace('t','b')count+=1}//文本ctx.font=text_fontctx.fillStyle=text_color[count%7]ctx.fillText("DVD",position_x,position_y+background_height-fix_height)//背景色ctx.fillStyle=background_color[count%7]//开始动画window.requestAnimationFrame(dvd)}}

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