用canvas画的北斗七星和大熊座，主要用到的知识点是：canvas、定时器。

html代码：

 <body>

     <canvas id="canvas" width="1250px" height="670px">

     </canvas>

 </body>

css代码：

 body{

     background-color:#0B0B0D;

 }

 #canvas{

     position: absolute;

 }

js代码：

  function draw(obj,x,y,r,color,r1,r2){

        var str=obj.createRadialGradient(x,y,r1,x,y,r2);

        if(color){

               str.addColorStop(0,"white");

            str.addColorStop(1,color);

         }

         else{

              str.addColorStop(0,"rgba(255,255,255,1)");

              str.addColorStop(1,"rgba(55,51,237,0.5)"); 

         }

          obj.beginPath();

        obj.fillStyle=str;

        obj.arc(x,y,r,0,Math.PI*2);

        obj.fill();

        obj.closePath();

   }

   function drawLine(obj,x1,y1,x2,y2,col,wid){

       obj.lineWidth = wid;

       obj.beginPath();

       if(col){

            obj.strokeStyle = col;

       }

       else{

           obj.strokeStyle = "rgba(55,51,237,0.4)";

       }

       obj.moveTo(x1, y1);

       obj.lineTo(x2, y2);

       obj.stroke();

 }

 function color(){

    return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);

 }

 function makeStar(){

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

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

     var a=[315,400,460,545,580,690,670];  //北斗七星的x坐标

     var b=[400,325,310,300,343,310,235];   //北斗七星的Y坐标

     var j=0;

     var i=0;

     var h=0;

     var m=0;

     var n=0;

     var count=0;

     var flag=1;

     var p=0;

     var c=[590,679,690,820,845,905,1000,825,835,840,970];

     var d=[420,615,460,500,340,365,420,275,215,165,240];

     var e=[580,590,679,590,690,820,690,590,845,905,1000,905,845,825,835,840,970,835,670,545];

     var f=[343,420,615,420,460,500,460,420,340,365,420,365,340,275,215,165,240,215,235,300];

     var g=[970,940,945,920,900,870,900,900,870/*耳朵*/,825,825,818,790,788,805,782,760,710,610,540,525/*尾巴*/,460,390,340,315,460,529,520,540,580,570,570,555,580,640,680,680,

            590,620,660,675,590,555,530,555,590,675,690,700,720,820,830,730,730,710,650,710,730,780,760,800,900,980,1000,920,980,980,900,895,885,870,870,950,900,970];

     var k=[240,190,173,148,135,128,112,135,128/*耳朵*/,135,155,130,120,148,165,157,157,188,245,288,300/*尾巴*/,300,315,335,400,335,325,390,460,502,540,570,590,627,640,630,610,

            580,550,520,480,470,430,370,430,470,480,490,520,530,500,470,470,420,398,380,398,420,405,370,410,395,430,400,360,390,360,335,355,320,305,270,270,245,240];

    var tout=setInterval(function(){

          var l=Math.ceil(Math.random()*1250);

          var o=Math.ceil(Math.random()*700);

          count++;

          if(flag==1){

               draw(ctx,l,o,1.5,color(),1,2);

               flag=2;

          }else if(flag==2){

                draw(ctx,l,o,1.5,null,1,1);

                flag=3;

          }else if(flag==3){

                 draw(ctx,l,o,1,color(),1,1);

                 flag=4;

          }

          else if(flag==4){

                 draw(ctx,l,o,2,color(),0.5,2.5);

                 flag=1;

          }

          if(count>=800){

              clearInterval(tout);

          }

    },10);

 var cont=setTimeout(function(){

      var g=ctx.createRadialGradient(700,400,150,700,400,1200);

          g.addColorStop(0,"black");

          g.addColorStop(1,"white");

          ctx.beginPath();

          ctx.fillStyle=g;

          ctx.arc(700,400,300,0,Math.PI*2);

          ctx.fill();

       ctx.closePath();

  },8000);

 var start=setTimeout(function(){   

     var timer=setInterval(function(){   //画七颗星

         draw(ctx,a[j],b[j],8,null,3,8);

         j++;

         if(j>6){

             clearInterval(timer);

         }

     },900);

     var time=setInterval(function(){   //画七条线

          drawLine(ctx,a[i],b[i],a[i+1],b[i+1],null,1);

         i++;

         if(i>5){

             clearInterval(time);

         }

     },1100);

 },9000);

 var start=setTimeout(function(){

     var xiong=setInterval(function(){

         draw(ctx,c[p],d[p],4,color(),2,4);

         p++;

         if(p>10){

             clearInterval(xiong);

         }

     },700);

       var end=setInterval(function(){

              drawLine(ctx,e[h],f[h],e[h+1],f[h+1],"skyblue",1);

             h++;

             if(h>19){

                 clearInterval(end);

             }

         },800);

 },17000);

 var start=setTimeout(function(){

     var timer=setInterval(function(){

         draw(ctx,g[m],k[m],3,color(),2,4);

         m++;

         if(m>74){

             clearInterval(timer);

             console.log("ok1");

         }

     },200);

     var time=setInterval(function(){

          drawLine(ctx,g[n],k[n],g[n+1],k[n+1],"rgba(255,255,255,0.8)",1);

         n++;

         if(n>74){

             clearInterval(time);

             console.log("ok");

         }

     },220);

  },34000);

 }

  makeStar();

canvas画的北斗七星和大熊座的更多相关文章

  1. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  2. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  3. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  4. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  5. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

  7. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  8. 樱花的季节，教大家用canvas画出飞舞的樱花树

    又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...

  9. HTML5之Canvas画圆形

    HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...

随机推荐

  1. InnoDB缓存读命中率、使用率、脏块率(%) 缓冲池的读命中率(%) 缓冲池的利用率(%) 缓冲池脏块的百分率(%)

    InnoDB缓存读命中率.使用率.脏块率(%) 缓冲池的读命中率(%) 缓冲池的利用率(%) 缓冲池脏块的百分率(%)

  2. 会议室预订 - 对td的处理以区分预订者

    w 待处理

  3. Python菜鸟之路：Django 路由补充1：FBV和CBV - 补充2：url默认参数

    一.FBV和CBV 在Python菜鸟之路:Django 路由.模板.Model(ORM)一节中,已经介绍了几种路由的写法及对应关系,那种写法可以称之为FBV: function base view ...

  4. ubuntu14 编译安装（升级）g++

    编译安装(升级)g++ ubuntu14自带的g++为4.8.4,不支持c++11.现要将g++升至5.2.0 1.下载安装: 参考https://www.cppfans.org/1719.html ...

  5. django的项目创建简明流程

    个人理解,不妥之处请指出 创建项目:django-admin startproject user_sys 创建APP:python manage.py startapp auth 测试项目创建是否成功 ...

  6. Linux（6）- redis发布订阅/持久化/主从复制/redis-sentinel/redis-cluster、nginx入门

    一.redis发布订阅 Redis 通过 PUBLISH .SUBSCRIBE 等命令实现了订阅与发布模式. 其实从Pub/Sub的机制来看,它更像是一个广播系统,多个Subscriber可以订阅多个 ...

  7. 代码艺术 CountDownTimer

    /** * Schedule a countdown until a time in the future, with regular notifications on intervals along ...

  8. tomcat 是如何处理jsp和servlet请求

    我们以一个具体的例子,来跟踪TOMCAT, 看看它是如何把Request一层一层地递交给下一个容器, 并最后交给Wrapper来处理的. 以http://localhost:8080/web/logi ...

  9. Android Studio 启动时不自动打开项目

    主界面中,选择单击菜单栏 File ,单击 Settings 选择 Appearance & Behavior 选项.选择System Settings选项.取消勾选Reopen last p ...

  10. 查询dubbo服务

    1.公司内网肯定会有服务治理平台,把自己提供的服务接口当关键字查询即可. 2.命令方式实现 查看本机Dubbo服务是否启动,telnet localhost [端口号],端口号是在注册dubbo服务的 ...