效果图

五角星计算方式

代码

<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绘制一片星空的更多相关文章

  1. HTML5 Canvas ( 绘制一片星空 )

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. HTML5 Canvas ( 绘制一轮弯月, 星空中的弯月 )

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 用HTML5绘制的一个星空特效图

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  5. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  8. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  9. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

随机推荐

  1. AsyncHttpClient 源码分析

    上一篇文章从功能和用法上对AsyncHttpClient做了个大致介绍,今天我们和以往一样,从内部实现.原理的角度带领大家看看 其工作机制,以便加深理解.写程序越多,我发现每接触一个新东西,都会有强烈 ...

  2. web.xml 中的listener、 filter、servlet 加载顺序及其详解

    在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人的,毕竟人家写的不错,自己也就不重复造轮子了,只是略加点了自己的修饰. 首先可以肯定的是 ...

  3. js实现动态操作table

     本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...

  4. ajax参数设置略解

    通过ajax可以直接由页面访问到服务器.做到不刷新页面,就能刷新数据,为开发带来很大的便利. 1.ajax方式的参数及其功能: $.ajax({ type : "POST", // ...

  5. #研发解决方案#基于Apriori算法的Nginx+Lua+ELK异常流量拦截方案

    郑昀 基于杨海波的设计文档 创建于2015/8/13 最后更新于2015/8/25 关键词:异常流量.rate limiting.Nginx.Apriori.频繁项集.先验算法.Lua.ELK 本文档 ...

  6. ORA-00600: internal error code, arguments: [LibraryCacheNotEmptyOnClose]

      案例环境: 操作系统版本: Red Hat Enterprise Linux ES release 4 数据库版本  : 10.2.0.4.0 32 bit 案例介绍: 今天我执行stop_ora ...

  7. 0029 Java学习笔记-面向对象-枚举类

    可以创建几个对象? n多个:大部分的类,都可以随意创建对象,只要内存不爆掉 1个:比如单例类 有限的几个:采用单例类的设计思路,可以只允许创建少数的几个特定的对象:还有就是枚举类. 创建少数几个对象, ...

  8. 算法: 斐波那契数列C/C++实现

    斐波那契数列: 1,1,2,3,5,8,13,21,34,....     //求斐波那契数列第n项的值 //1,1,2,3,5,8,13,21,34... //1.递归: //缺点:当n过大时,递归 ...

  9. java HashMap

    HashMap 的性能因子 1. 容量:表示桶位的数量. 2. 初始容量: 表在创建是所拥有的桶位数.   如果你知道将要在HashMap存储多少项,创建一个初始容量合适的HashMap将可以避免自动 ...

  10. linux中的权限对于文件和目录的重要性

    对于文件 r 可以读取文件的实际内容 w 可以编辑文件的内容 x 文件可以被系统执行 对于目录 r 具有读取目录的结构列表,也就是说你可以用ls命令查看目录下的内容列表 w 可以建立新的文件,删除文件 ...