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

随机推荐

Linux如何查找大文件或目录总结
在Windows系统中,我们可以使用TreeSize工具查找一些大文件或文件夹,非常的方便高效,在Linux系统中,如何去搜索一些比较大的文件呢?下面我整理了一下在Linux系统中如何查找大文件或文件 ...
Ant ：DataType
DataType patternset fileset selector filelist path regexp Ant datatype Ant中,除了Property可以做为Task执行时使用的 ...
MAC OS X的ACL扩展权限设置
在WEB开发时,网站是以_www的用户运行的,而我在本地是以liuwencan的用户编辑的.这就带来一个问题:如果所有文件属于liuwencan,那么网站运行需要写文件时就因无权限而失败:如果所有文件 ...
如何区分/dev/input/event
方法是把每一个/dev/input/event打开.通过ioctl函数来读取设备name,每一个设备name是固定的,可以根据name区分event.我这是查找触摸事件为例:代码如下: static ...
Javascript 中的严格模式
原文:http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html 一.概述除了正常运行模式,ECMAscript 5添加了第 ...
HDU 4622 Reincarnation （查询一段字符串的不同子串个数，后缀自动机）
Reincarnation Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)To ...
px，em，rem
px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem. em:继承 ...
利用Caffe做回归(regression)
Caffe应该是目前深度学习领域应用最广泛的几大框架之一了,尤其是视觉领域.绝大多数用Caffe的人,应该用的都是基于分类的网络,但有的时候也许会有基于回归的视觉应用的需要,查了一下Caffe官网,还 ...
科学计算器（JAVA实现）
前记: 大二学 Java 的时候写的,现在贴上来,只为留念. 再翻代码,自己看着都头疼.一重重的 if 嵌套,当时写得费劲,现在看着更费劲. 代码思想: 代码的大致思想是这样: 首先定义一个算式字符串 ...
装13失败后的逆袭(ComboBox的联动)
当我们在做ComboBox的联动的时候飞一般的敲出自认为完美的代码.在运行的时候突然变得不完美了. 比如: 如果发生了这种情况会不会就卡磁了呢当然不会作为程序猿的我们考的是我们聪明的大脑,当然会想出 ...

使用canvas绘制一片星空

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

随机推荐

热门专题