这是canvas的drawImage方法在图片上的一个应用第一个参数见MDN的解释：绘制到上下文的元素。允许任何画布图像源（CanvasImageSource），例如：CSSImageValue、HTMLImageElement来操作![]()
元素的布局和图像。sources.ImageBitmap提供了一种异步且资源高效的方式来准备WebGL渲染的基础设施。”）或者OffscreenCanvas很清楚，可以是img标签，svg图片元素，video标签，另一个canvas，base64和screen等八个外部画布（在内存中）的参数可以分为两组。第一组标签是：sx,sy,sw,sh；s表示源（source），即从其中的x、y坐标开始绘制，要绘制的宽度sw和高度sh；同理，下一组dx、dy、dw、dh、d代表目的地（目标点），在画布的什么地方绘制dx、dy以及要绘制的dw、dh的宽高。好了，了解了这些，我们来说说原理：看下图：-上面四张图是小鱼游动时的动作，下面四张图是被钓到后的动作。我们只用上面四张图一张，用drawImage连续取第一条鱼，第二条，第三条，第四条在画布上画。绘制时，先清除之前的绘制，会有动画效果。我们要做的就是不断更新sy（原图的y坐标）和dx（画在画布上的鱼的x坐标）。获取对象，然后创建一个新的图像对象：letc1=document.getElementsByTagName('canvas')[0];letgd=c1.getContext('2d');letoImg=newImage();oImg.src='记录gif/fish1.png';由于我们在执行drawImage操作的时候可能还没有创建oImg，所以我们添加一个onload，然后使用requestAnimationFrame：oImg.onload=function(){requestAnimationFrame(next);//这里有使用函数next()的介绍{gd.drawImage(oImg,//画鱼0,0,55,37,100,100,55,37)requestAnimationFrame(next);}}重影，必须清除之前的绘图：gd.clearRect(0,0,c1.width,c1.height);从上到下取小鱼，不断更新sy的值，设置一个变量i，保持++：令i=0；oImg.onload=function(){requestAnimationFrame(next);//使用函数介绍next(){gd.clearRect(0,0,c1.width,c1.height);我++；gd.drawImage(oImg,//画鱼0,37*i,55,37,100,100,55,37)requestAnimationFrame(next);}}它是怎么闪过的？i变量太大了，图片这么高。当i==4（第四条鱼）时，归零：if(i==4)i=0;设置一个变量来调整速度：window.onload=function(){letc1=document.getElementsByTagName('canvas')[0];让gd=c1.getContext('2d');让oImg=newImage();oImg.src='录制gif/fish1.png';让我=0;letframeCounter=0//速度变量oImg.onload=function(){requestAnimationFrame(next);//用法介绍functionnext(){gd.clearRect(0,0,c1.width,c1.height);if(frameCounter%3==0){//每3帧i++i++;如果（我==4）我=0；}gd.drawImage(oImg,//画鱼0,37*i,55,37,100,100,55,37)帧计数器++;requestAnimationFrame（下一步）；}}}正常让他动，设置一个变量x:window.onload=function(){letc1=document.getElementsByTagName('canvas')[0];让gd=c1.getContext('2d');让oImg=newImage();oImg.src='录制gif/fish1.png';让我=0;letframeCounter=0//速度控制变量letx=100;//让鱼动起来oImg.onload=function(){requestAnimationFrame(next);//用法介绍functionnext(){gd.clearRect(0,0,c1.宽度,c1.高度);x+=2;//调整鱼游动速度if(frameCounter%3==0){//每3帧i++i++;如果（我==4）我=0；}gd.drawImage(oImg,//画鱼0,37*i,55,37,x,100,55,37)frameCounter++;requestAnimationFrame（下一步）；最后可以添加鼠标点击页面鱼停顿，然后点击移动事件：这里就不一步步教了，核心就是上面的部分，下面是完整代码：window.onload=function(){letc1=document.getElementsByTagName('canvas')[0];让gd=c1.getContext('2d');让oImg=newImage();oImg.src='录制gif/fish1.png';让我=0,x=100;让frameCounter=0;letpause=false;//控制是否暂停functionmove(pause){//小鱼运动函数gd.clearRect(0,0,c1.width,c1.height);if(!pause){//暂停时x的值不会更新，他不让游x+=2;}if(frameCounter%3==0){//控制小鱼游动速度i++;//控制小鱼摆动速度if(i==4)i=0;//圆形摆动}gd.drawImage(oImg,//画鱼0,37*i,55,37,x,100,55,37)frameCounter++;}oImg.onload=function(){requestAnimationFrame(next);//用法介绍functionnext(){if(!pause){//如果没有暂停，鱼会动()}else{//它点击后不会游泳，只会摆动（暂停）；}requestAnimationFrame(下一步);}}document.onclick=function(){pause=!pause;//点击页面切换暂停或继续}}效果为第一张图
