【Canvas】canva实例-星空、日出的效果

一、描述

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

二、代码

<!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>
时间: 2024-10-04 00:29:23

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

使用Canvas对象实现“刮刮乐”效果

在淘宝.京东等电商举办活动的时候,经常可以看到在移动客户端推出的各种刮奖活动,而这种活动也受到了很多人的喜爱.从客户端的体验来说,这种效果应该是通过网页来实现的,那么,我们使用Android的自带控件能不能实现这种刮刮乐的效果呢?当然可以,本篇文章将介绍使用Canvas这个对象,如何实现"刮刮乐"的效果. 先看效果图 下面我们看一下如何使用代码实现 布局文件 <FrameLayout xmlns:android="http://schemas.android.com/a

jQuery插件实例四:手风琴效果[无动画版]

手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是有动画效果的. 在这个插件中,CSS和JS的配置非常重要,需要特别注意.另外,加个思考,请先看完后再想这个问题:当点击其中某项时,给width直接添加animate是否合适,当快速在其上移动时,如何保证效果? 效果图预览 插件JS accordionB.js 1 ; 2 (function ($,

HTML5 Canvas 实现的9个 Loading 效果

Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Loading)加载动画效果. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型

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

文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫酷,能和鼠标互动吸附或者是躲避鼠标指针. 使用方法 1.该粒子动画库插件使用方法非常简单,首先要在页面中引入particles.js文件. <script src="js/particles.js"></script> 2.在页面中使用一个div来作为放置粒子的容器

基于HTML5 canvas的jQuery刮刮卡效果

ScratchIt是一款基于HTML5 canvas的jQuery刮刮卡效果插件.这个刮刮卡效果使用两张图片和canvas来制作,可以使用鼠标擦除上面的图片,将下面的图片显露出来,模拟现实的刮刮卡效果. 效果演示:http://www.htmleaf.com/Demo/201506071985.html 下载地址:http://www.htmleaf.com/html5/html5-canvas/201506071984.html

HTML5 canvas 小实例

原文:HTML5 canvas 小实例 源代码下载地址:http://www.zuidaima.com/share/1550463607016448.htm HTML5 canvas 小实例 .

canvas 实现星空闪烁的效果,鼠标滑动,连接周围的点

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> </head><body> <canvas id="mycanvas"></canvas></body><script> var c = do

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

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style> 8 body{ background:#fff;} 9 div{ width:800px; height:600px; margin:0 auto;} 10 canvas{ backg

星空添加星星效果

private var starNum:int = 100; //星星数量 private var scene_width:int=1440; //星星的舞台范围 private var scene_height:int=500; //星星的舞台范围 //星空效果 动态添加星星 for(var j:int = 0;j < starNum;j++){ var McClass2:Class = loadClassDefinition("star"); var mcstart:Movi