• 【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>
    计划、执行、每天高效的活着学着
  • 相关阅读:
    java入门 (七) 面向对象(三)
    java入门 (七) 面向对象(二)
    java入门 (七) 面向对象(一)
    ajax异步请求,$.each遍历拼接数据
    java入门 (六) 数组(二)
    java入门 (六) 数组(一)
    java入门 (五) 方法
    微信小程序
    776C Molly's Chemicals --- 前缀和
    CF 458C Elections --- 三分|线段树
  • 原文地址:https://www.cnblogs.com/huxiaoyun90/p/4199690.html
Copyright © 2020-2023  润新知