用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. Powershell运行Invoke-Sqlcmd命令的先决条件

    运行Invoke-Sqlcmd命令,使用这个命令需满足如下条件: 1.在运行服务器中安装SQL Server 2008 R2 Management ObjectsI 2.在运行命令 invoke-sq ...

  2. windows python easy_install ,pip. selenium

    http://www.cnblogs.com/fnng/p/3157639.html 搭建平台windows 准备工具如下: unknown encoding: cp65001异常 python安装后 ...

  3. jquery根据值设置radio和select选中状态

    1.radio选中: $("input[name=test][value=34]").attr("checked",true);//value=34的radio ...

  4. JavaBean 介绍

    // Person.java public class Person{ private String name; private int age; // 无参构造函数 public Person(){ ...

  5. kubernetes，Docker网络相关资料链接

    1.Why kubernetes not doesn't use libnetwork http://blog.kubernetes.io/2016/01/why-Kubernetes-doesnt- ...

  6. Android--Apache HttpClient（2种实现）

    前言 上一篇文章介绍了使用HttpURLConnection来完成对于HTTP协议的支持,现在介绍一个新的方式来访问Web站点,那就是HttpClient. HttpClient是Apache开源组织 ...

  7. Android—Http连接之GET/POST请求

    在Android SDK中提供了Apache HttpClient(org.apache.http.*)模块.在这个模块中涉及到两个重要的类:HttpGet和HttpPost.    创建步骤:    ...

  8. 初级dba学习之路参考

    今天周一拖着疲惫的身躯 11点才离开公司,回到家估计写完这篇博客就要17号了. 一个人走在回家的路上,很黑,突然很多感触,一个人在北京拼搏,不敢停止学习的脚步,因为只要停下来就会感觉到孤独. 回顾一下 ...

  9. tkprof工具详解二

      TKPROF是一个可执行文件,自带在Oracle Server软件中,无需额外的安装. 该工具文件可以用来解析ORACLE的SQL TRACE(10046) 以便生成更可读的内容.  实际上tkp ...

  10. 吴超老师课程--HBASE的Java_API

    public static void main(String[] args) throws IOException { String tableName="hbase_tb"; S ...