canvas画动画问题求解释？

Question

<br> /** @type {HTMLCanvasElement} */<br> window.onload = function () {<br> let mycanvas = document.getElementById(&#39;mycanvas&#39;);<br> let ctx = mycanvas.getContext(&#39;2d&#39;)<br> let imgleft = document.querySelectorAll(&#39;img&#39;)[0];<br> let imgright = document.querySelectorAll(&#39;img&#39;)[1];<br> let i = 0;<br> let o ;<br> setInterval(() =&gt; {<br> ctx.clearRect(0, 0, 600, 600)<br> o = i + 1<br> i = o % 8;<br> ctx.drawImage(imgleft, i*97, 0, 97, 155, 0, 0, 100, 155);<br> }, 100);<br> }</p> <pre><code> </code></pre> <p>写出来的动画里面有很多个人再动 不是再同一个人物上面动的。<br> 咋回事啊？</p>

Answer 1

https://www.cnblogs.com/gbin1/p/4043276.html