使用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 ...

随机推荐

C#中 ??、 ?、 ?: 、?.、?[ ]
1. 可空类型修饰符(?)引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空. 例如:string str=null; 是正确的,int i=null; 编译器就会报错. 为了使值类型 ...
Sqoop 结合多种系统的具体应用
Sqoop与HDFS结合下面我们结合 HDFS,介绍 Sqoop 从关系型数据库的导入和导出. Sqoop import 它的功能是将数据从关系型数据库导入 HDFS 中,其流程图如下所示. 我们来 ...
MongoDB学习笔记~索引提高查询效率
回到目录索引这个东西大家不会陌生,只要接触到稍微大一点的数据,都会用到这东西,它可以提升查询的速度,相当代价就是占用了更多的存储空间,这也是正常的,符合“能量守恒定理”,哈哈!今天说的是MongoD ...
【转】最牛B的编码套路
最近,我大量阅读了Steve Yegge的文章.其中有一篇叫“Practicing Programming”(练习编程),写成于2005年,读后令我惊讶不已: 与你所相信的恰恰相反,单纯地每天埋头于工 ...
大型web系统数据缓存设计
1. 前言在高访问量的web系统中,缓存几乎是离不开的:但是一个适当.高效的缓存方案设计却并不容易:所以接下来将讨论一下应用系统缓存的设计方面应该注意哪些东西,包括缓存的选型.常见缓存系统的特点和数 ...
percona教程：MySQL GROUP_CONCAT的使用
percona有一篇blog: The power of MySQL GROUP_CONCAT 比较详细地介绍了GROUP_CONCAT函数的用法.简单地翻译了一下. 假设你有4名工程师,这周他们为6 ...
05.virsh命令的常用操作(kvm)
注:以下命令均可在virsh的man手册页中找到 KVM虚拟机管理常用命令(domain): virsh命令参数功能用法举例 list 查看已经存在的domain信息(可以带参数) vir ...
缺陷管理平台mantis安装及配置
软件说明:Mantis是一个基于PHP技术的轻量级的开源缺陷跟踪系统,以Web操作的形式提供项目管理及缺陷跟踪服务.在功能上.实用性上足以满足中小型项目的管理及跟踪.更重要的是其开源,不需要负担任何费 ...
monkeyrunner之电脑安装驱动（五）
在Monkeyrunner做自动化测试时,可以使用模拟器,当然也可以选择用真机.不过,要想通过电脑来安装软件,操作手机,则必须先安装手机驱动,而且一般手机连接电脑之后,电脑会自动开始下载驱动.不过也经 ...
关于安装ruby brew 提示失败
Error running 'requirements_osx_brew_update_system ruby-1.9.3-p551', showing last 15 lines of /Users ...

使用canvas绘制一片星空

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

随机推荐

热门专题