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" /> & ...
随机推荐
- sqlserver----记录转载（行转列）、列转行、pivot、unpivot
CREATE TABLE [StudentScores] ( ), --学生姓名 ), --科目 [Score] FLOAT, --成绩 ) 如果我想知道每位学生的每科成绩,而且每个学生的全部成绩排成 ...
- logging/re - 总结
logging 模块 很多程序都有记录日志的需求 logging的日志可以分为 debug(), info(), warning(), error() and critical()5个级别 1.输出到 ...
- Java 常用工具类之 String 类
String 类的特点: 字符串对象一旦被初始化就不会被改变. //以下代码的区别: String s = "abc"; // 在常量池中创建一个字符串对象, 池中没有就建立, 池 ...
- python用whl文件安装包
直接用pip安装包的时候有时会因为许多奇怪的原因安装失败,这时就需要祭出大杀器——whl文件 python3 -m pip install whl文件路径名 whl库:https://www.lfd. ...
- python学习之路-第六天-一个简单的脚本
现在有一个需求:把某个目录下的文件备份到指定到另外一个目录下,而且压缩后文件为zip文件 # -*- coding:utf-8 -*- #! /usr/bin/python # Filename:ba ...
- beego——flash数据
这个flash与 Adobe/Macromedia Flash没有任何关系,它主要用于在两个逻辑间传递临时数据, flash中存放的所有数据会在紧接着的下一个逻辑中调用后清除. 一般用于传递提示和错误 ...
- Django框架之模板语法（重要！）
一.什么是模板? 只要是在html里面有模板语法就不是html文件了,这样的文件就叫做模板. 二.模板语法分类 1.模板语法之变量:语法为 {{ }}: 在 Django 模板中遍历复杂数据结构的关键 ...
- 基于对象的跨表查询，多对多查询，多对多操作，聚合查询和分组查询，F查询和Q 查询
基于对象的跨表查询 一对多查询(班级表和学生表) 表结构创建 class Class(models.Model): id = models.AutoField(primary_key=True) cn ...
- Fatal error in launcher: Unable to create process using '"'的报错解决
执行命令前加python -m就好了 python -m pip install --upgrade pip这条命令用来升级pip
- clipboard
我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的 ...