一、描述

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

二、代码

<!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>

【Canvas】canva实例-星空、日出的效果的更多相关文章

  1. canvas绘制经典星空连线效果

    来自:https://segmentfault.com/a/1190000009675230 下面开始coding:先写个canvas标签 <canvas height="620&qu ...

  2. HTML5 Canvas 实现的9个 Loading 效果

    Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...

  3. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  4. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  5. 使用ajax上传图片，并且使用canvas实现出上传进度效果

    前端代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l ...

  6. [ html canvas 模仿支付宝刮刮卡效果 ] canvas绘图属性 模仿支付宝刮刮卡效果实例演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  7. [js高手之路] html5 canvas教程 - 制作一个数码倒计时效果

    效果图: 这个实例主要注意: 1,剩余时间的计算 2,每个时间数字的绘制 时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 ) num.js文件: var di ...

  8. 【javascript实例】 具有立体效果的图片浏览器

    此实例,直接粘贴代码即可运行,当然图片的路径不要忘记改了. 此实例是我一遍学习一边写出来的,希望能够帮到大家,一起学习.效果如图所示: html代码如下所示: <html xmlns=" ...

  9. HTML5自学笔记[ 24 ]canvas绘图之星空草地

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. Python中如何调用Linux命令

    一.使用os模块 In [1]: import os #导入os模块 In [2]: os.system('ls') anaconda-ks.cfg epel-release-7-5.noarch.r ...

  2. Data Guard 的三种保护模式

    官方文档链接 http://docs.oracle.com/cd/E11882_01/server.112/e41134/protection.htm#SBYDB02000 最大可用模式(Maximu ...

  3. 更改zendstudio花括号匹配显示的方法

  4. java数组中取出最大值

    class Demo{ public static void main(String []args){ int[] arr={3,54,456,342,2798}; int max=getMax(ar ...

  5. django-xadmin隐藏菜单不显示

    环境:https://github.com/y2kconnect/xadmin-for-python3.git python3.5 django1.9.12 在adminx.py中的Admin类增加属 ...

  6. 3.Smarty的基本语法

    一.注释的方法是 {* 这里填注释 *} 二.在Smarty的输出赋值进来的变量 1.变量是字符串的时候 1)关联数组 $arr = array('a'=>'cai','b'=>'muqi ...

  7. Android远程桌面助手

    很早之前,做过一个<WinCE远程桌面助手>,在没有屏幕或者在调试LCD驱动时,发挥了很大作用,平日开发也是必备.后来还被网友用于处理一些疑难问题,如无法输入开机密码时可通过该工具远程输入 ...

  8. ArcGIS API for JavaScript 4.4学习笔记[新] AJS4.4和AJS3.21新特性

    ESRI官网悄无声息突然更新4.4和3.21,公众号也没有什么消息.照例,给大家看看这次更新有什么新特性吧. 1. AJS 4.4 官方更新日志:点我,比较详细.我在这里抽一些主干作为说明. 1.1 ...

  9. RabbitMQ系列教程之五：主题（Topic）

    (本实例都是使用的Net的客户端,使用C#编写),说明,中文方括号[]表示名词.   在上一个教程中,我们改进了我们的日志记录系统. 没有使用只能够进行虚拟广播的[Fanout]交换机,而是使用了[D ...

  10. 防止js全局变量污染方法总结

    javaScript 可以随意定义保存所有应用资源的全局变量.但全局变量可以削弱程序灵活性,增大了模块之间的耦合性.在多人协作时,如果定义过多的全局变量 有可能造成全局变量冲突,也就是全局变量污染问题 ...