The animation effect of Canvas drawing is shown as follows:



No words on the code, thank you

<! DOCTYPE HTML> <html> <body> <canvas id="sun" width="300" height="300" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
    var sun = new Image();
    var moon = new Image();
    var earth = new Image();
    function init(){
        sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
        moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
        earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
        window.requestAnimationFrame(draw);
    }

    function draw() {
        var ctx = document.getElementById('sun').getContext('2d');

        ctx.globalCompositeOperation = 'destination-over'; // Displays the target image above the source image. ,0,300,300 CTX. ClearRect (0); // clear canvas ctx.save(); CTX. Translate (150150); ctx.save(); // Earth var time = new Date(); // Rotate the earth according to time, Ctx.rotate (((2* math.pi)/60)* time.getseconds () + ((2* math.pi)/60000)* time.getmilliseconds ()); CTX. Translate (105, 0); //105 is the radius of the Earth's orbit, where is also the current origin ctx.fillstyle ='rgba (0,0,0,0.4)'; // Earth backlight surface shadow color ctx.fillrect (0,-12,15,24); FillRect (x,y,width,height); ctx.drawImage(earth,-12,-12); //drawImage(img,x,y); // Moon ctx.beginPath(); // Moon ctx.beginPath(); ctx.strokeStyle ='grey'; // Lunar orbit line color ctx.arc(0,0,28.5,0, math.pi *2,false); // Moon orbit (where the center is (0,0), but where the origin has already moved to) ctx.stroke(); ctx.save(); // The current rotation origin is the center of the earth, Rotate (((2* math.pi)/6)* time.getseconds () + ((2* math.pi)/6000)* time.getmilliseconds ()); ,28.5 CTX. Translate (0); DrawImage (moon,-3.5,-3.5); drawImage(moon,-3.5,-3.5); Ctx.restore (); ctx.restore(); // Here restore restores the save state ctx.beginPath() on line 28; ctx.strokeStyle ='rgba (0153255,0.4)'; // earth orbit line color ctx.arc(0,0,105,0, math.pi *2,false); // Earth orbit ctx.stroke(); ctx.restore(); */ ctx.drawImage(Sun,0,0,300,300); */ ctx.drawImage(Sun,0,0,300,300); window.requestAnimationFrame(draw); } init(); Rotate rotate rotate rotate rotate rotate rotate rotate rotate rotate rotate rotate rotate rotate rotateCopy the code