一、描述

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

二、代码

<!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. 12.ThreadPoolExecutor线程池原理及其execute方法

    jdk1.7.0_79  对于线程池大部分人可能会用,也知道为什么用.无非就是任务需要异步执行,再者就是线程需要统一管理起来.对于从线程池中获取线程,大部分人可能只知道,我现在需要一个线程来执行一个任 ...

  2. 前台ajax加载数据

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> <script sr ...

  3. scala环境配置+hello world!

    下载地址: http://www.scala-lang.org/download/ 我下载的是zip 配置环境变量 需要jdk支持,jdk的安装配置此处略过 控制台命令 scala -version ...

  4. javascript 闭包 转载

    http://www.jb51.net/article/24101.htm var name = "the window"; var object = { name:"m ...

  5. QPS的计算方法

    每秒查询率QPS是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准,在因特网上,作为域名系统服务器的机器的性能经常用每秒查询率来衡量. 原理:每天80%的访问集中在20%的时间里,这20%时 ...

  6. 遇到build的问题

    可以打开C/C++BUILD里面把build直接改成cmd,cmd   path是有的

  7. webpack以及loader 加载命令

    module.exports={ entry:'./main/main.js', output:{ path:'./build', filename:'bundle.js' }, module:{ l ...

  8. ionicangular 成长日记

    //首先配置文件ionic.bundle.min.jsionic.min.css" //创建一个angular控制器,控制器给body/html都可以angular.module('myap ...

  9. JanaScript预解析

    JS预解析是什么?      在当前的作用域下,js运行之前.会有带有 var 和 function关键字的代码事先声明,      并在内存中安排好,然后从上到下的执行js代码. JS预解析 js逐 ...

  10. Tomcat管理页面配置

    详情参考:http://www.365mini.com/page/tomcat-manager-user-configuration.htm 修改$CATALINA_BASE/conf/tomcat- ...