2023学年完整公开课版Canvas动画

Canvas动画绘制动画方法window.requestAnimationFrame()该方法告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行Canvas动画Canvas动画varcontext=document.getElementById("canvas").getContext("2d");window.requestAnimationFrame(draw);varx=20;varspeed=4;//电脑的帧率是1秒钟60Hz，就相当于一秒钟可以播放60张图片，//就相当于播放一张图片使用16.7msfunctiondraw(){//1.先把画布清空context.clearRect(0,0,canvas.width,canvas.height);//2.画小球context.beginPath();vargradient=context.createRadialGradient(x-10,190,0,x,200,20);gradient.addColorStop(0,'#fff');gradient.addColorStop(1,'#333');Canvas动画

Canvas动画Canvas动画

context.fillStyle=gradient;context.arc(x,200,20,0,2*Math.PI);context.fill();//3.x要移动x+=speed;if(x>canvas.width-20||x<20){speed=-speed;}//被优化过的动画执行方向1.递归调用；2.可以自适应浏览器的刷新的帧率window.requestAnimationFrame(draw);}draw();浏览器效果:Canvas动画Canvas动画varcanvas=document.querySelector("#canvas");canvas.width=window.innerWidth;canvas.height=window.innerHeight;varcontext=canvas.getContext("2d");varmouse={x:undefined,y:undefined}//屏幕鼠标坐标window.addEventListener("mousemove",function(event){mouse.x=event.x;mouse.y=event.y;});//鼠标移动事件，回调函数，赋值给鼠标坐标Canvas动画window.addEventListener("resize",function(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;init();//初始化canvas})//重新设置窗口大小，使canvas宽高自适应屏幕varmaxRadius=40;//绘制圆的最大半径varcolorArray=['#58D68D', '#E67F22','#3598DB', '#E84C3D','#9A59B5', '#27AE61','#D25400', '#BEC3C7','#297FB8']//圆的颜色数组Canvas动画functionCircle(x,y,dx,dy,radius){//x圆中心的x坐标;y圆中心的y坐标//dx圆运动的x偏移量;dy圆运动的y偏移量radius圆的半径 this.x=x;this.y=y;this.dx=dx;this.dy=dy;this.radius=radius;this.minRadius=radius;this.bg=colorArray[Math.floor(Math.random()*colorArray.length)];this.draw=function(){context.beginPath();context.strokeStyle="#777";context.fillStyle=this.bg;context.arc(this.x,this.y,this.radius,Math.PI/180*0,Math.PI/180*360,false);context.fill();}Canvas动画Canvas动画Canvas图像this.update=function(){//圆触碰边界时反弹，偏移值为负if(this.x+this.radius>innerWidth||this.x-this.radius<0){this.dx=-this.dx;}if(this.y+this.radius>innerHeight||this.y-this.radius<0){this.dy=-this.dy;}//刷新绘制时圆的偏移运动this.x+=this.dx;this.y+=this.dy;//鼠标半径50像素范围内的圆，它们的半径逐步增加到最大值

Canvas动画Canvas动画

if(mouse.x-this.x<50&&mouse.x-this.x>-50&&

mouse.y-this.y<50&&mouse.y-this.y>-50){if(this.radius<maxRadius){this.radius+=1;}//其他的所有圆半径减小到最小值}elseif(this.radius>this.minRadius){this.radius-=1;}//根据更新的值进行绘制this.draw();}varcircleArray=[];圆的对象数组圆的对象数组圆的对象数组圆的对象数组圆的对象数组Canvas动画Canvas动画//初始化函数，制造800个随机坐标、偏移速度和半径的圆，加入到对象数组functioninit(){circleArray=[]for(vari=0;i<800;i++){varx=Math.random()*window.innerWidth;vary=Math.random()*window.innerHeight;vardx=(Math.random()-0.5)*2;vardy=(Math.random()-0.5)*2;varradius=Math.random()*3+1;circleArray.push(newCircle(x,y,dx,dy,radius));}}init();Canvas动画Canvas动画//动画函数functionanimate(){//更新前清除画布context.clearRect(0,0,window.innerWidth,window.innerHeig