一、描述

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

二、代码

<!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. redis学习（1）--- NoSQL介绍

    一.NoSQL介绍 1.什么是NoSQL NoSQL = Not Only SQL 非关系型数据库 2.为什么用NoSQL High performance - 高并发读写 Huge Storage ...

  2. oracle中的function的简单语法定义

    1. create or replace 函数名 (参数名 in 类型) return 返回值类型 as 定义变量 begin 函数体 end;

  3. UIButton图片文字控件位置自定义(图片居右文字居左、图片居中文字居中、图片居左文字消失等)

    在开发中经常会碰到需要对按钮中的图片文字位置做调整的需求.第一种方式是通过设置按钮中图片文字的偏移量.通过方法setTitleEdgeInsets和setImageEdgeInsets实现 代码如下: ...

  4. ionic 项目中使用ngCordova插件$cordovaCamera筛选手机图库图片显示出来并上传

    原文档请看http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic%E5%9B%BE%E7%89%87%E4%B8%8A%E4%B ...

  5. CSS3学习系列之字体

    给文字添加阴影 在CSS3中,可以使用text-shadow属性给页面上的文字添加阴影效果.text-shadow属性是在css2中定义的,在css2.1中删除,在css3的text模块中有恢复了,用 ...

  6. Builder模式详解及其在Android开发中的应用

    一.引言 在Android开发中,采用Builder模式的代码随处可见,比如说Android系统对话框AlertDialog的使用或者是Android中的通知栏(Notification)的使用,又比 ...

  7. php中的四种排序算法

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

  8. js模拟jq获取id

    js模拟jq获取id: (jquery)需要自己添加 <!DOCTYPE html> <html lang="en"> <head> <m ...

  9. touchmover手机移动端的拖动

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...

  10. Ionic/Angularjs 知识点解析

    Ionic/Angularjs 知识点解析 angular-ui-router(状态跳转) state的定义:(在app.js的config下配置) $stateProvider .state('ap ...