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

随机推荐

Html--表单练习
 <html> & ...
ORACLE数据库汉字占几个字节问题
一同事由于系统需求关系,将SQL SERVER数据库的一个表导入ORACLE数据库时,发现居然报错:ORA-12899: value too large for column xxxx (actual ...
ORACLE的SPFILE与PFILE
ORACLE中的参数文件是一个包含一系列参数以及参数对应值的操作系统文件,可以分为两种类型.它们是在数据库实例启动时候加载的,决定了数据库的物理结构.内存.数据库的限制及系统大量的默认值.数据库的各种 ...
truncate 、delete与drop区别
原博文地址:http://www.cnblogs.com/8765h/archive/2011/11/25/2374167.html 相同点: 1.truncate和不带where子句的delete. ...
特定IP访问远程桌面
1. 新建IP安全策略 (远程端口没有修改情况下的设置) WIN+R打开运行对话框,输入“gpedit.msc”进入组策略编辑器. 依次打开:本地计算机策略--计算机配置--Windows设置--安全 ...
Python单例模式
1.单例模式介绍单例模式,也叫单子模式,是一种常用的软件设计模式.在应用这个模式时, 单例对象的类必须保证只有一个实例存在.许多时候整个系统只需要拥有一个全局对象,这样有利于我们协调系统整体的行为 ...
对iOS后台模式最多10分钟运行时间的进一步理解
在app进入后台时,系统初始默认是只有10s的处理时间,但如果10s不够,我们可以主动申请,网上流传最多的一个说法是10分钟. 但这种说法有个前提: 那就是iOS7之前,是这样但从iOS7开始,我们 ...
【小白的CFD之旅】10 敲门实例
按黄师姐的说法,做好第一个案例很重要.第一个案例既可以帮助理解CFD的工作流程,还可以帮助熟悉软件的操作界面. 黄师姐推荐的入门案例来自于ANSYS官方提供的培训教程,是一个关于交叉管内流动混合的案例 ...
Citrix Xen Desktop安装配置
Citrix虚拟化的东西其实和我现在做的东西完全没有关系的.反正接到通知要搭一个Citrix Xen Desktop那就做. 先放几个教程: :跟着图片通过XenDesktop7发布Win8桌面这个 ...
浏览器对于常见HTTP状态码的反应
在我们向服务器发送一个HTTP请求时,会经历tcp连接(三次握手),发送HTTP请求,服务器返回HTTP响应,浏览器对响应中的状态码进行分析判断,来确定请求是否成功,是否成功得到我们需要的信息. 那么 ...

使用canvas绘制一片星空

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

随机推荐

热门专题