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" /> & ...
随机推荐
- 巨蟒python全栈开发-第10天 函数进阶
一.今日主要内容总览(重点) 1.动态传参(重点) *,** *: 形参:聚合 位置参数*=>元组 关键字**=>字典 实参:打散 列表,字符串,元组=>* 字典=>** 形参 ...
- 《挑战程序设计竞赛》2.5 最短路 AOJ0189 2249 2200 POJ3255 2139 3259 3268（5）
AOJ0189 http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=0189 题意 求某一办公室到其他办公室的最短距离. 多组输入,n表示 ...
- Grammar Rules
Grammar Rules Here are 20 simple rules and tips to help you avoid mistakes in English grammar. For m ...
- transaction 数据库事务 roolback 回滚
事务是恢复和并发控制的基本单位 https://baike.baidu.com/item/数据库事务/9744607 事务有三种模型: 1．隐式事务是指每一条数据操作语句都自动地成为一个事务,事务的开 ...
- 原!操作 excel 03/07
参考 所用jar包: poi-3.11.jar poi-ooxml-3.11.jar poi-ooxml-schemas-3.11.jar /* * Project: fusion-may-open- ...
- 贪玩ML系列之一个BP玩一天
手写串行BP算法,可调batch_size 既要:1.输入层f(x)=x 隐藏层sigmoid 输出层f(x)=x 2.run函数实现单条数据的一次前馈 3.train函数读入所有数据for循环处理 ...
- 踩坑之jinja2注释问题(Flask中)
报错信息 jinja2.exceptions.TemplateSyntaxError jinja2.exceptions.TemplateSyntaxError: Expected an expr ...
- python中如何去掉unicode编码前面的u?
1.列表类型(用join方法) myUlist = [u'AB', u'AB', u'AB', u'AB'] print myUlist print ", ".join(myUli ...
- redis中默认有多少个哈希槽？
Redis 集群中内置了 16384 个哈希槽,当需要在 Redis 集群中放置一个 key-value时,redis 先对 key 使用 crc16 算法算出一个结果,然后把结果对 16384 求余 ...
- python中decorator的用法及原理（一）
0. 概念 什么叫装饰器,其实也可以叫做包装器.即对于一个既有的函数func(args),在调用它之前和之后,我们希望都做一些事情,把这个函数包装起来. Python中的装饰器分为两类:函数装饰器和类 ...