【Canvas】canva实例-星空、日出的效果

一、描述

模仿星空后黎明到来，日出的场景

二、代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="" charset="utf-8">
</head>
<body style="margin:0;padding:0;">
<canvas id="demo"></canvas>
</body>
<script type="text/javascript">
    var moonX = 300;
    var moonY = 150;
    var moonR = 100;
    window.onload = function(){
        var canvas = document.getElementById('demo');
        canvas.width = window.screen.width;
        canvas.height = 1600;
        var ctx = canvas.getContext('2d');

        var linearGradient = ctx.createLinearGradient(0,0,0,1600);
        linearGradient.addColorStop(0, "black");
        linearGradient.addColorStop(0.65, "#035");  
        linearGradient.addColorStop(0.8, "orange");  
        linearGradient.addColorStop(1, "pink");        
        ctx.fillStyle = linearGradient;
        ctx.fillRect(0,0,canvas.width,canvas.height);

        ctx.beginPath();
        ctx.fillStyle = "yellow";
        ctx.arc(moonX,moonY,moonR,Math.PI * 0,Math.PI *2,true);
        ctx.closePath();
        ctx.fill();
   

        for(var i = 0 ; i < 50 ; i++){
            var r = Math.random() * 10 + 5;
            var x = Math.random() * canvas.width;
            var y = Math.random() * canvas.height * 0.25;
            var a = Math.random() * 360;
            if((x<(moonX + moonR)) && (x > (moonX - moonR)) && 
                (y < (moonY + moonR)) &&(y > (moonY - moonR))){
                continue;
            }
            drawStar(ctx,x,y,r,a);
        }

        drawSun(ctx);        
    }

    function drawSun(ctx){
        var canvas = ctx.canvas;
        var sunX = canvas.width * 0.5;
        var sunY = canvas.height + moonR;
        var interval = setInterval(function(){
            ctx.beginPath();
            ctx.fillStyle = "red";
            ctx.arc(sunX,sunY,moonR,Math.PI * 0,Math.PI *2,true);
            ctx.closePath();
            ctx.fill();  

            sunY = sunY - 10;
            if(sunY < canvas.height){
                clearInterval(interval);
                drawText(ctx,"新的一天开始啦！",canvas.width * 0.65,canvas.height * 0.95);
            }
        },500);         
    }

    function drawText(ctx,text,x,y){
        ctx.fillStyle = "yellow";
        ctx.font="30px Arial";
        ctx.textAlign="start";
        ctx.fillText(text,x,y);    
    }

    function drawStar(ctx,x,y,r,rot){
        ctx.save();
        ctx.translate(x,y);
        ctx.rotate(rot/180 *Math.PI);
        ctx.scale(r,r);

        starPath(ctx);

        ctx.fillStyle = "#fb3";
        //ctx.strokeStyle = "#fd5";
        //ctx.lineWidth = 3 ;
        //ctx.lineJoin = "round";

        ctx.fill();
        // ctx.stroke();

        ctx.restore();
    }
    function starPath(ctx){
        ctx.beginPath();
        for(var i = 0 ; i < 5 ; i ++){
            ctx.lineTo(Math.cos((18 + i*72)/180 * Math.PI),
                -Math.sin((18 + i*72)/180 * Math.PI));
            ctx.lineTo(Math.cos((54 + i*72)/180 * Math.PI) * 0.5,
                -Math.sin((54+ i*72)/180 * Math.PI) * 0.5);            
        }
        ctx.closePath();
    }

</script>
</html>

 

posted @ 2015-01-03 16:52  空城夕  阅读(554)  评论(0)  编辑  收藏  举报