canvas画的北斗七星和大熊座
用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画的北斗七星和大熊座的更多相关文章
- 使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
- canvas 画圈 demo
html代码: <canvas id="clickCanvas2" width="180" height="180" data-to ...
- 踩个猴尾不容易啊 Canvas画个猴子
踩个猴尾不容易啊 Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- canvas画随机闪烁的星星
canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...
- canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Canvas画椭圆的方法
虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生 oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...
- 深夜，用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- 樱花的季节，教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...
- HTML5之Canvas画圆形
HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...
随机推荐
- 【转】windows 下 goprotobuf 的安装与使用
1. 安装 在网上看了很多教程,都提到要安装 protoc 与 protoc-gen-go,但通过尝试之后并不能正确安装 protoc,一下记录能够顺利安装 protoc 与 protoc-gen-g ...
- https://blog.newrelic.com/2014/05/02/25-php-developers-follow-online/
w https://blog.newrelic.com/2014/05/02/25-php-developers-follow-online/ 1. Rob Allen. Zend Framework ...
- img标签使用onload进行src更改时出现的内存溢出问题
最近在开发时需要在img标签加载完成后修改src属性,使用了onload方法. 但是在方法体中最后没有把onload事件指向null, 导致了循环调用onload方法,CPU占用一直居高不下,最后只要 ...
- Java基础语法 - 面向对象 - 类的主方法main方法
主方法是类的入口点,它指定了程序从何处开始,提供对程序流向的控制.Java编译器通过主方法来执行程序. 主方法的语法如下: /* a.主方法是静态的,如果要直接在主方法中调用其它方法,则该方法必须也是 ...
- Ionic的下拉框在手机上点击无效
最近在维护ionic+angular的项目,在浏览器使用下拉框的时候调试的时候,一切正常. 但是在手机上测试的时候,遇到这个问题. 我使用的版本是ionic1.3.1,不知道新版本有没有解决这个bug ...
- Linux安装redis数据库及添加环境变量
1.下载安装包 [root@localhost opt]# yum install wget [root@localhost opt]# wget http://download.redis.io/r ...
- linux下Pl353 NAND Flash驱动分析
linux的NAND Flash驱动位于drivers/mtd/nand子文件夹下: nand_base.c-->定义通用的nand flash基本操作函数,如读写page,可自己重写这些函数 ...
- （4.3）ODBC/OLE DB/ADO概念与使用情况
一.ODBC ODBC的由来 1992年Microsoft和Sybase.Digital共同制定了ODBC标准接口,以单一的ODBC API来存取各种不同的数据库.随后ODBC便获得了许多数据库厂 ...
- 假设做一个精美的Login界面(攻克了一EditText自带clear的功能,相似iphone的UITextField)
先上图: XML为: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
- 第一课Linux系统安装知识(2)
接着上节课单击Finish按钮之后,虚拟机将会启动进入安装界面. 根据提示按回车选择图形界面安装. 这里选择Skip跳过媒介检查. 选择安装语言为简体中文,键盘鼠标默认项即可. 这里安装类型选择是定制 ...