canvas画的北斗七星和大熊座
2024-06-04 17:01:29
用canvas画的北斗七星和大熊座，主要用到的知识点是：canvas、定时器。
html代码：
1 <body> 2 <canvas id="canvas" width="1250px" height="670px"> 3 4 </canvas> 5 6 </body>
css代码：
1 body{
2 background-color:#0B0B0D;
3 }
4
5 #canvas{
6 position: absolute;
7 }js代码：
1 function draw(obj,x,y,r,color,r1,r2){
2
3 var str=obj.createRadialGradient(x,y,r1,x,y,r2);
4
5
6
7
8 if(color){
9
10 str.addColorStop(0,"white");
11 str.addColorStop(1,color);
12 }
13 else{
14
15 str.addColorStop(0,"rgba(255,255,255,1)");
16 str.addColorStop(1,"rgba(55,51,237,0.5)");
17
18 }
19
20 obj.beginPath();
21 obj.fillStyle=str;
22 obj.arc(x,y,r,0,Math.PI*2);
23 obj.fill();
24 obj.closePath();
25
26 }
27
28
29 function drawLine(obj,x1,y1,x2,y2,col,wid){
30
31
32 obj.lineWidth = wid;
33 obj.beginPath();
34 if(col){
35 obj.strokeStyle = col;
36 }
37 else{
38 obj.strokeStyle = "rgba(55,51,237,0.4)";
39 }
40
41 obj.moveTo(x1, y1);
42 obj.lineTo(x2, y2);
43 obj.stroke();
44 }
45
46
47 function color(){
48 return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
49 }
50
51
52 function makeStar(){
53 var c=document.getElementById("canvas");
54
55 var ctx=c.getContext("2d");
56
57 var a=[315,400,460,545,580,690,670]; //北斗七星的x坐标
58 var b=[400,325,310,300,343,310,235]; //北斗七星的Y坐标
59 var j=0;
60 var i=0;
61 var h=0;
62 var m=0;
63 var n=0;
64 var count=0;
65 var flag=1;
66 var p=0;
67
68 var c=[590,679,690,820,845,905,1000,825,835,840,970];
69 var d=[420,615,460,500,340,365,420,275,215,165,240];
70
71
72 var e=[580,590,679,590,690,820,690,590,845,905,1000,905,845,825,835,840,970,835,670,545];
73 var f=[343,420,615,420,460,500,460,420,340,365,420,365,340,275,215,165,240,215,235,300];
74
75
76 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,
77 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];
78 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,
79 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];
80
81 var tout=setInterval(function(){
82
83 var l=Math.ceil(Math.random()*1250);
84 var o=Math.ceil(Math.random()*700);
85 count++;
86
87 if(flag==1){
88 draw(ctx,l,o,1.5,color(),1,2);
89 flag=2;
90 }else if(flag==2){
91 draw(ctx,l,o,1.5,null,1,1);
92 flag=3;
93 }else if(flag==3){
94 draw(ctx,l,o,1,color(),1,1);
95 flag=4;
96 }
97
98 else if(flag==4){
99 draw(ctx,l,o,2,color(),0.5,2.5);
100 flag=1;
101 }
102
103 if(count>=800){
104 clearInterval(tout);
105 }
106
107 },10);
108
109
110
111 var cont=setTimeout(function(){
112
113 var g=ctx.createRadialGradient(700,400,150,700,400,1200);
114
115 g.addColorStop(0,"black");
116 g.addColorStop(1,"white");
117
118 ctx.beginPath();
119 ctx.fillStyle=g;
120 ctx.arc(700,400,300,0,Math.PI*2);
121 ctx.fill();
122 ctx.closePath();
123
124 },8000);
125
126
127
128 var start=setTimeout(function(){
129
130 var timer=setInterval(function(){ //画七颗星
131 draw(ctx,a[j],b[j],8,null,3,8);
132 j++;
133 if(j>6){
134 clearInterval(timer);
135
136 }
137 },900);
138
139
140 var time=setInterval(function(){ //画七条线
141 drawLine(ctx,a[i],b[i],a[i+1],b[i+1],null,1);
142 i++;
143 if(i>5){
144 clearInterval(time);
145
146 }
147
148 },1100);
149
150
151 },9000);
152
153
154 var start=setTimeout(function(){
155
156 var xiong=setInterval(function(){
157 draw(ctx,c[p],d[p],4,color(),2,4);
158 p++;
159 if(p>10){
160 clearInterval(xiong);
161 }
162
163 },700);
164
165
166 var end=setInterval(function(){
167 drawLine(ctx,e[h],f[h],e[h+1],f[h+1],"skyblue",1);
168 h++;
169 if(h>19){
170 clearInterval(end);
171 }
172
173 },800);
174
175 },17000);
176
177
178
179 var start=setTimeout(function(){
180
181 var timer=setInterval(function(){
182 draw(ctx,g[m],k[m],3,color(),2,4);
183 m++;
184 if(m>74){
185 clearInterval(timer);
186 console.log("ok1");
187 }
188 },200);
189
190
191 var time=setInterval(function(){
192 drawLine(ctx,g[n],k[n],g[n+1],k[n+1],"rgba(255,255,255,0.8)",1);
193 n++;
194 if(n>74){
195 clearInterval(time);
196 console.log("ok");
197 }
198
199 },220);
200
201
202 },34000);
203
204
205
206 }
207
208 makeStar();转载于:https://www.cnblogs.com/dan-dan/p/4674420.html
canvas画的北斗七星和大熊座相关推荐
- Java //PP2.16编写一个applet，画出北斗七星，并在夜空中添加一些其他的星星
Java程序设计教程(第七版) John Lewis & William Loftus 电子工业出版社 PP2.16编写一个applet,画出北斗七星,并在夜空中添加一些其他的星星. 注意: ...
- 把北斗七星与北极星捡起来
前言 在2020年4月16日的晚上,我在沿河路和父母一块散步,抬头一看,漫天繁星.而后,随意一扫,发现天空中有一把勺子的星星图.这时,我无比兴奋,这,就是我小时候一直想找的北斗七星啊,哈哈哈哈,幸好我 ...
- 微信小程序中base64格式的小程序码通过canvas画出来无效
使用场景 小程序中的文章详情页面有一个分享功能:用户点击分享按钮,生成一张分享图片(包括封面图,简介以及带有文章ID的小程序码),方便用户保存在本地. 问题说明 小程序码通过后台接口获取,格式如下:' ...
- 关于星空的java小程序_[Java教程]小程序使用Canvas画饼图_星空网
小程序使用Canvas画饼图 2018-10-24 0 先上效果图 -------------------------------------------------------------w --- ...
- python程序、画一个笑脸_如何使用canvas画一个微笑的表情（代码示例）
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...
- [html] 请使用canvas画一个椭圆
[html] 请使用canvas画一个椭圆 <script> var c=document.getElementById("myCanvas"); var ctx=c. ...
- [html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
- HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...
- html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码 复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...
最新文章
- linux下编译动态和静态链接库
- dev c++代码自动补全_让代码自动补全的全套流程
- Spring—Quartz定时调度CronTrigger时间配置格式说明与实例
- php 负载监控_php记录服务器负载、内存、cpu状态的代码
- python自动控制库_一个可以自动化控制鼠标键盘的库：PyAUtoGUI
- eclipse下添加viplugin插件的方法
- vc中提取curve
- C语言137页答案,综合化学实验答案题库（137页）-原创力文档
- mysql sqlsugar_【开源框架】SqlSugarRepository 全库ORM 正式发布
- php字符不可选状态,php – mailto不可读的字符 – unicode
- 中国水性植绒胶行业市场供需与战略研究报告
- 为Python IDLE 添加清屏（Ctrl + L ）快捷工具（附带解决错误的方法）
- 突破同一账号不能同时在不同电脑登录限制程序软件(多电脑端登录器多开软件)
- 2021张家界五一出行攻略
- 什么是LOST.DIR？
- 子网掩码是什么?子网掩码及其CIDR斜杠表示法
- 东昂科技冲刺深交所：年营收2.6亿 庄俊辉控制69%股权
- 基于机器学习的敏感信息泄露治理探索
- IDEA远程提交hadoop任务时出现的错误
- DSP芯片F2803x系列之PWM模块及高精度PWM使用