使用canvas绘制一片星空

效果图

五角星计算方式

代码

<body style="margin:0px;padding:0px;width:100%;height:100%;overflow:hidden;">

    <canvas id="canvas" style="border: 1px solid #aaa" width="1920" height="962">

        你的浏览器不支持canvas，请更换浏览器再试!

    </canvas>

    <script>

        var c=document.getElementById("canvas");

        c.width=document.body.clientWidth;

        c.height=document.body.clientHeight;

        window.onload=function(){

            if(c.getContext("2d")){

                var cxt= c.getContext("2d");

            }else{

                document.write("你的浏览器不支持canvas，请更换浏览器再试!");

            }

            //星空背景颜色

            var linearCrad=cxt.createLinearGradient(0,0,0, c.height* 0.68);

            linearCrad.addColorStop(0.0, '#7ac4e1');

            linearCrad.addColorStop(0.2, '#5eb8dd');

            linearCrad.addColorStop(1.0, '#b6e2e5');

            cxt.fillStyle=linearCrad;

            cxt.fillRect(0,0, c.width, c.height);

            //循环绘制100颗星星

            for(var i=0 ; i<100 ; i++){

                var r=Math.random() * 6 + 2;//半径

                var x=Math.random() * c.width * 0.98 ; // x偏移量

                var y=Math.random() * c.height * 0.6; //y偏移量

                var a=Math.random() * 360; //旋转角度

                drawStart(cxt , r/2.0 , r , x , y , a);

            }

            //月亮

            fillMoon(cxt ,2, c.width * 0.88 , c.height * 0.24 ,100 ,20 , "#fff");

            //绿地

            drawLand(cxt);

        }

        /*

        * cxt:绘图环境

        * r：小圆半径

        * R：大圆半径

        * x：x轴偏移量

        * y：y轴偏移量

        * rot：旋转角度（逆时针）*/

        function drawStart(cxt,r,R,x,y,rot){

            cxt.beginPath();

            cxt.fillStyle="#fff"

            cxt.strokeStyle="#88b9dd";

            for(var i=0 ; i < 5 ;i++){

                cxt.lineTo( Math.cos((18+ i*72 - rot )/180 * Math.PI) * R + x//大圆

                        , -Math.sin((18 + i*72 - rot)/180 *Math.PI) * R + y);

                cxt.lineTo( Math.cos((54+ i*72 - rot )/180 * Math.PI) * r + x//小圆

                        , -Math.sin((54 + i*72 - rot)/180 *Math.PI) * r + y);

            }

            cxt.closePath();

            cxt.fill();

            cxt.stroke();

        }

        /*

         *参数说明

         *R: 半径

         * rot：旋转角度

         *fillColor: 填充颜色

         * */

        function fillMoon(cxt ,d , x , y , R , rot , fillColor){

            cxt.save();

            cxt.translate(x , y);

            cxt.rotate(rot * Math.PI / 180);

            cxt.scale(R , R);

            pathMoon(cxt , d);

            cxt.fillStyle=fillColor || "#fb5";

            cxt.shadowColor = "rgba(58,88,124,0.5)";

            cxt.shadowOffsetX = 14 ;

            cxt.shadowOffsetY = 14;

            cxt.shadowBlur = 30;

            cxt.fill();

            cxt.restore();

        }

        /*

         d ：坐标

         */

        function pathMoon(cxt , d){

            cxt.beginPath();

            /*

             *圆心（0,0）

             *半径：1

             * */

            cxt.arc(0 , 0 , 1 , 0.5 * Math.PI , 1.5 * Math.PI , true);

            cxt.moveTo(0 , -1);

            cxt.arcTo(d , 0 , 0 , 1 , dis(0 , -1 , d , 0) / d);

            cxt.closePath();

        }

        function dis(x1 , y1 ,x2 , y2){

            return Math.sqrt( (x1-x2) * (x1-x2) + (y1-y2) * (y1-y2) );

        }

        /*

        * 绿地

        * */

        function drawLand(cxt){

            cxt.save();

            cxt.beginPath();

            cxt.moveTo(0 , c.height * 0.7);

            /*cxt.bezierCurveTo(540 , 400 , 660 , 800 , 1200 , 600);*/

            cxt.bezierCurveTo(c.width * 0.4 , c.height * 0.5 , c.width * 0.5 , c.height * 0.9 , c.width  , c.height * 0.8);

            cxt.lineTo(c.width , c.height);

            cxt.lineTo(0 , c.height);

            cxt.closePath();

            //添加渐变

            var landStyle = cxt.createLinearGradient(0 , 800 , 0 ,0);

            landStyle.addColorStop(0.0 ,'#7dbf44');

            landStyle.addColorStop(0.2 ,'#b9d532');

            landStyle.addColorStop(1 ,'#79bd46');

            cxt.fillStyle=landStyle;

            cxt.fill();

            cxt.restore();

        }

     </script>

</body>

使用canvas绘制一片星空的更多相关文章

HTML5 Canvas ( 绘制一片星空 )
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
HTML5 Canvas ( 绘制一轮弯月, 星空中的弯月 )
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
用HTML5绘制的一个星空特效图
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
封装用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
Canvas绘制图形
1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

随机推荐

Android内存泄漏
Java是垃圾回收语言的一种,其优点是开发者无需特意管理内存分配,降低了应用由于局部故障(segmentation fault)导致崩溃,同时防止未释放的内存把堆栈(heap)挤爆的可能,所以写出来的 ...
KEIL中启动文件详解（汇编语言）
原文在此:http://www.cnblogs.com/mddblog/p/4920063.html 概述在嵌入式系统中,启动文件是整个系统非常关键的部分,它会进行一些底层的初始化,构建程序运行必要 ...
在CentOS7上安装JDK1.8
在CentOS7上安装JDK1.8 1 通过 SecureCRT 连接到阿里云 CentOS7 服务器: 2 进入到目录 /usr/local/ 中: cd /usr/local/ 3 创建目录 to ...
ref
ref: 当控制权传递回调用方法时,在方法中对参数的任何更改都将反映在该变量中. 例如: class RefExample { //使用ref返回的函数 static void Method(ref ...
RMAN-06023: no backup or copy of datafile 1 found to restore
在ORACLE 10g数据库还原过程遭遇RMAN-06023: no backup or copy of datafile x found to restore,具体情况如下所示 .......... ...
git 命令使用总结
聊下 git rebase -i 聊下git merge --squash 聊下git pull --rebase 聊下 git remote prune origin 聊下 git 使用前的一些注意 ...
烂泥：haproxy学习之https配置
本文由ilanniweb提供友情赞助,首发于烂泥行天下想要获得更多的文章,可以关注我的微信ilanniweb. 在前一段时间,我写了几篇有关学习haproxy的文章.今天我们再来介绍下haproxy ...
java类加载器深入研究
看了下面几篇关于类的加载器的文章,豁然开朗.猛击下面的地址开始看吧. Java类加载原理解析深入探讨 Java 类加载器分析BootstrapClassLoader/ExtClassLo ...
CANopen学习——OSI模型复习
CanOpen协议实现了物理层和数据链路层,OSI模型是完整的7层. OSI模型网络七层包括物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 物理层:提供信息传输的物理连接通道,包括使用的 ...
jdbc java数据库连接 3）Statement接口之执行DDL和DML语句的简化
上一章的代码中,可以发现,jdbc执行DDL和DML有几个步骤都是一样的: 1)执行语句开始时,创建驱动注册对象.获取连接的数据库对象.创建Statement对象 // 创建驱动注册对象 Class. ...

使用canvas绘制一片星空

使用canvas绘制一片星空的更多相关文章

随机推荐

热门专题