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" /> & ...
随机推荐
- IOS数据持久化之归档NSKeyedArchiver, NSUserDefaults,writeToFile
//2.文件读写 //支持:NSString, NSArray , NSDictionay, NSData //注:集合(NSArray, NSDictionay)中得元素也必须是这四种类型, 才能够 ...
- 打印出所有的"水仙花数"
题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个"水仙花数",因为153=1 ...
- 假设做一个精美的Login界面(攻克了一EditText自带clear的功能,相似iphone的UITextField)
先上图: XML为: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
- Python（面向对象3 ——实例）
这个小东西包括了最近学习的,包括模块.包.序列化.继承.派生.组合的应用举例.整体架构如图: bin是程序入口,core包括了几个主要逻辑,main是主架构,login包括登录功能,register包 ...
- Seaborn相关
Seaborn:基于Matplotlib,seaborn提供许多功能,比如:内置主题.颜色调色板.函数和提供可视化单变量.双变量.线性回归的工具.其能帮助我们构建复杂的可视化. ————————缩写定 ...
- [翻译]Feedback on the Go Challenge solutions
第一次Go Challenge比赛,中国区只有3人参赛. 赛后收到邮件,是一个审阅者的反馈,“Feedback on the Go Challenge solutions”,摘录如下: 保持简单粗暴 ...
- centos6.5系统python2.6升级到python3.6
1.安装必备的工具 wget:yum install wget gcc:yum install gcc zlib zlib-devel: yum install zlib zlib-devel -y ...
- pt-osc使用方法
pt-osc实战运用 1.安装pt-osc,解压即可用 安装包在:10.135.2.217:data/online/software/percona-toolkit-3.0.12.tar.gz tar ...
- Linux 上下左右键变成^A，^B，^C，^D解决方法
用gedit打开 /etc/vim/vimrc.tiny,将里面的 set compatible 改成 set nocompatible 对于退格键backspace的问题,只需在刚才那句话下面加上一 ...
- Runnable、Callable
Runnable 任务,没有返回值 Callable 任务,又返回值 Runnable与Callable 相同点: 1. 都是接口: 2. 用来编写多线程程序: 3. 都需要调用Thread.star ...