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" /> & ...
随机推荐
- SQL case when else
先占个坑,sql 版本的swith case SELECT Oldvote, (CASE THEN (SELECT NOW() from dual) END) as "number" ...
- Career Planning：Developers Best Practices Tutorial
This small tutorial is based on my past 16+ years of experience in software development industry. I ...
- 洛谷P4475 巧克力王国
洛谷P4475 巧克力王国 题目描述 巧克力王国里的巧克力都是由牛奶和可可做成的. 但是并不是每一块巧克力都受王国人民的欢迎,因为大家都不喜欢过于甜的巧克力. 对于每一块巧克力,我们设 x 和 y 为 ...
- sql server升级打补丁
原本:https://blog.csdn.net/kk185800961/article/details/72436415 sql server升级 sql server打补丁 sql server升 ...
- 基于视觉反馈的步进电机X-Y平台控制
关键词:步进电机.XY平台.视觉反馈 用途:工业自动化 文章类型:原理介绍.随笔纪念 @Author:VShawn(singlex@foxmail.com) @Date:2017-05-01 @Lab ...
- c3p0连接不上sql server
1.首先判断sqlserver是否安装成功 2如果sqlserver正常运行 可能是因为没有打开1433端口,按以下步骤设置tcp/ip enabled 打开之后再重新启动sql server服务,按 ...
- 从零到一创建ionic移动app：应用anjularjs编写ionic项目
推荐两篇文章,带你入门 ionic中文项目(作为了解ionic基础结构用):http://blog.csdn.net/i348018533/article/details/47258449/ ioni ...
- python处理时间相关的方法
记录python处理时间的模块:time模块.datetime模块和calendar模块. python版本:2.7 https://blog.csdn.net/songfreeman/article ...
- linux命令（6/11）--修改文件的用户组chgrp和文件所有者chown
在lunix系统里,文件或目录的权限的掌控以拥有者及所诉群组来管理.可以使用chgrp指令取变更文件与目录所属群组,这种方式采用群组名称或群组识别码都可以.Chgrp命令就是change group的 ...
- 双camera景深计算 （1）
http://www.52rd.com/S_TXT/2016_6/TXT85047.HTM?WebShieldDRSessionVerify=Wz3h6srvu76qRI4MFxK8 前面介绍了双ca ...