Canvas + simple animation to realize moon drawing

Animation achieve:

By setInterval method calls non-stop context.clearRect () method to clean up the canvas, and then redraw the page.

In addition, html5 API also provides a special request for the animation, that is requestAnimationFrame, as the name suggests is to ask animation frames.

Next chapter: pseudo-3D engine zdog

init();
function init(){
      if(moon.x <= canvas.width) {
           moon.x += 20;
           fillMoon(ctx, 2, moon.x, moon.y, 100, 35);
      } else {
           moon.x = 0;
      }
      requestAnimationFrame(init);
};

The following are examples:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            #canvas {
                display: Block ; 
                border : 1px Solid #ccc ; 
                margin : 0 Auto ; 
            } 
        </ style > 
    </ head > 

    < body > 
        < Canvas the above mentioned id = "Canvas" > Your browser does not support </ Canvas > 
    </ body > 
    < Script > 
        var Moon = { 
            X: 100 , 
            Y: 120 
        }; 

        var Canvas= document.getElementById("canvas");
        canvas.width = screen.width;
        canvas.height = screen.height;
        var ctx = canvas.getContext("2d");

        var time = 2000;

        setInterval(function() {
            if(moon.x <= canvas.width) {
                moon.x += 50;
                fillMoon(ctx, 2, moon.x, moon.y, 100, 35 ); 
            } the else { 
                moon.x =  0 ; 
            } 

        }, Time); 

        // moon configuration 
        function fillMoon (CTX, D, X, Y, R & lt, rot, the fillColor) // R & lt radius, rot rotation angle 
        { 
            ctx.clearRect ( 0 , 0 , canvas.width, canvas.height); 

            var skyStyle = ctx.createRadialGradient ((canvas.width /  2 ), canvas.height, 0 , (canvas.width /  2 ), canvas.height -  100 ,250 ); // (the startx, startY, EndX, Endy); 
            skyStyle.addColorStop ( 0.0 , " # 176 293 " ); // float between the first parameter is 0-1. Indicates the color position 
            skyStyle.addColorStop ( 1.0 , " Black " ); 
            ctx.fillStyle = skyStyle; 
            ctx.fillRect ( 0 , 0 , canvas.width, canvas.height); 

            ctx.save (); 
            ctx.translate (X, Y); 
            ctx.rotate (rot * Math.PI /  180 [ );
            ctx.scale ( 50 , 50 ); // context.scale (ScaleWidth, ScaleHeight); magnification 
            PathMoon (CTX, D); 
            ctx.fillStyle = the fillColor ||  " # FB5 " ; 
            ctx.fill (); 
            ctx.restore (); 

            // draw stars 
            for ( var I =  0 ; I <  50 ; I ++ ) {
                 var R & lt = Math.random () *  . 5  +  . 1 ; // 10-20
                 var rot = Math.random() * 360;
                var x = Math.random() * canvas.width + 3;
                var y = Math.random() * canvas.height * 0.65 + 5;
                drawStar(ctx, x, y, r, rot);
            }

        }
        //绘制月亮
        function PathMoon(ctx, d) {
            ctx.beginPath();
            ctx.arc(0, 0, 1, 0.5 * Math.PI, 1.5 * Math.PI, true);
            ctx.moveTo(0, -1);
            ctx.arcTo(d, 0, 0, 1, dis(0, -1, d, 0) / d);
            ctx.closePath();
        }

        function dis(x1, y1, x2, y2) {
            return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (Y1 - Y2)); 
        } 

        // to set the state of the stars 
        function drawStar (ctx, X, Y, R & lt, rot) { 
            ctx.save (); // save status ctx 
            ctx.translate (x, y); // move 
            ctx.rotate (rot /  180 [  * Math.PI); // rotation angle 
            starPath (CTX, R & lt); 

            ctx.fillStyle =  " # FB3 " ; 
            ctx.strokeStyle =  " # FD5 " 
            ctx.lineWidth =  . 3 ; 
            ctx.lineJoin =  "round " ; 
            ctx.fill (); 
            ctx.stroke (); 

            ctx.restore (); // CTX back to the state before 
        }
         // package pentagram function 
        function starPath (CTX, R & lt) { 
            ctx.beginPath (); 
            for ( var I =  0 ; I <  . 5 ; I ++ ) { 
                ctx.lineTo (Math.cos (( 18 is  + I *  72 ) /  180 [  * Math.PI) * R & lt, - Math.sin, (( 18 is  + i * 72) / 180 * Math.PI) * r);
                ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * (r / 2), -Math.sin((54 + i * 72) / 180 * Math.PI) * (r / 2));
            }
            ctx.closePath();
        }
    </script>

</html>

Canvas + simple animation to realize moon drawing

Guess you like