一、描述

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

二、代码

<!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. 1.JAVA WEB 笔记中文乱码

    JAVA WEB 乱码问题解析 乱码原因 在Java Web开发过程中,经常遇到乱码的问题,造成乱码的原因,概括起来就是对字符编码和解码的方式不匹配. 既然乱码的原因是字符编码与解码的方式不匹配,那么 ...

  2. 代码管理器 TFS2013

    多人开发代码管理器肯定是少不了的,出于项目需要在服务器上装了tfs2013用于代码管理,既然用vs进行开发自然选择微软自家的tfs.记录下安装和使用起来的过程. 安装 TFS2013(Team Fou ...

  3. Navicat连接Oracle报错_Cannot load OCI DLL 87

    原因: Oracle需要装client才能让第三方工具通过OCI(Oracle Call Interface)来连接. 解决方案: 1. 去oracle官网下载Instant Client 11, 或 ...

  4. php中的四种排序算法

    . 冒泡排序 思路分析:在要排序的一组数中,对当前还未排好的序列,从前往后对相邻的两个数依次进行比较和调整,让较大的数往下沉,较小的往上冒.即,每当两相邻的数比较后发现它们的排序与排序要求相反时,就将 ...

  5. Spring Boot 自动重启（spring-boot-devtools）

    原文 https://github.com/x113773/testall/issues/8 1. 首先添加依赖```<dependency><groupId>org.spri ...

  6. Redis 基础数据结构与对象

    Redis用到的底层数据结构有:简单动态字符串.双端链表.字典.压缩列表.整数集合.跳跃表等,Redis并没有直接使用这些数据结构来实现键值对数据库,而是基于这些数据结构创建了一个对象系统,这个系统包 ...

  7. SVN仓库迁移到Git遇到的两个问题和解决办法

    OS: CentOS 7.0 准备: git svn git-svn sudo yum install git sudo yum install subversion sudo yum install ...

  8. Centos 6.x 部署pptp VPN

    安装 系统检测不到PPTP的时候  使用一下方法安装PPTP 下载地址:http://poptop.sourceforge.net/yum/stable/packages rpm -ivh http: ...

  9. net 中web.config单一解决方法 （其他配置引入方式）

    近期一个项目需要写许多的配置项,发现在单个web.config里面写的话会很乱也难于查找 所以搜了一下解决了,记录下来 一.   webconfig提供了引入其他config的方式 <conne ...

  10. [图形学] Chp10 OpenGL三维观察程序示例

    10.10节书中给出了一个程序示例,有一个填充正方形,从侧面的角度观察并画到屏幕上. 图0 这里进一步画出一个立方体,将相机放入立方体中心,旋转相机,达到在立方体中旋转看到不同画面的效果. 步骤: 1 ...