一、描述

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

二、代码

<!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. Winform使用的一些常识

    ? 防止数据绑定的列动态添加 需要设置DataGridView的AutoGenerateColumns属性为False ---------------------------------------- ...

  2. DB2简介和安装部署

    一.DB2相关概念 1.DB2体系结构: DB2体系结构中的最高一层是系统,一个系统表示DB2的一个安装.在由很多机器组成 的网络环境中,我们有时=也称系统为数据库分区,一个系统可以包含多个DB2实例 ...

  3. python+NLTK 自然语言学习处理二：文本

    在前面讲nltk安装的时候,我们下载了很多的文本.总共有9个文本.那么如何找到这些文本呢: text1: Moby Dick by Herman Melville 1851 text2: Sense ...

  4. linux 下tomcat的安装

    写在前面: 由于项目使用jdk1.6开发,所以对应服务器应安装jdk1.6和tomcat6 --- 1.环境变量的配置: 打开/etc/bashrc配置环境变量 JAVA_HOME=/usr/apps ...

  5. 用jquery循环获得所有input标签里的value值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Linux下php安装memcache

    Linux下php安装memcache说明:php安装目录:/phpstudy/server/php/bin/phpphp.ini配置文件路径:/phpstudy/server/php/etc/php ...

  7. GC机制总结

    一.为什么需要GC 应用程序对资源操作,通常简单分为以下几个步骤: 1.为对应的资源分配内存 2.初始化内存 3.使用资源 4.清理资源 5.释放内存 应用程序对资源(内存使用)管理的方式,常见的一般 ...

  8. Intent解析

    一.综述 intent对象是一个信息桶.它包含了接收它的组件感兴趣的信息(如:携带的动作和数据),附加Android系统感兴趣的信息(如:处理intent和启动目标Activity指令的组件的类别) ...

  9. 在H3C交换机上开通一个VLAN并且开通一个端口ping通它

    <H3C>system-view System View: return to User View with Ctrl+Z. [H3C]interface vlan-interface 2 ...

  10. gulp inline

    在html中所有需要内敛的文件 script link 后面都要写上inline 这样才能够,内敛到文件中.