祝建党100周年 祖国 长沙
感恩当下,祝福未来
长沙橘子洲的烟花真好看
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
那给你们也搞个代码做的烟花吧!
在网上转载大神写的, 用谷歌浏览最好
代码里调用 run() 可实现带线的烟花,
点击canvas生成一朵烟花
右击canvas清空一次画布
双击canvans生成一朵带线的随机烟花
代码里我将clear()方法隐藏掉了, 所以不会每一帧都清空画布
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击放烟花, 右击清空</title>
<style>
*{margin:0;padding:0;background-color:black;}
canvas{border:1px solid;}
</style>
<!-- 烟花类 和烟花碎屑类 -->
<script>
// 烟花
function Firework(sx, sy, ex, ey, hue){
this.sx=sx; // 开始x轴
this.sy=sy; // 开始y轴
this.ex=ex; // 结束x轴
this.ey=ey; // 结束y轴
this.x=sx; // 实时x轴
this.y=sy; // 实时y轴
this.old=new Array(); // 之前的旧角度
this.speed=random(50, 100);
this.angle=Math.atan2(ey - sy, ex - sx); // 角度
this.actualDistance=0; // 实际路径
this.distance=countDistance(sx, sy, ex, ey); // 计算总距离
this.acceleration=1.05; // 加速
this.friction=0.95 //摩擦力
this.gravity=1; //重力
this.hue=hue; // 色调
this.brightness=random(50, 80); //随机明度
this.alpha=1; //初始透明度
this.decay=random(0.015, 0.03); //碎屑小时的时间
this.color="black";
// 现将old存储两个xy, 防止画出的时候下标溢出
this.old.push({x:this.x, y:this.y});
this.old.push({x:this.x, y:this.y});
}
// 烟花路径更新
Firework.prototype.update=function(){
this.old.push({x:this.x, y:this.y}); // 储存废旧路径
var x=Math.cos(this.angle) * this.speed;
var y=Math.sin(this.angle) * this.speed;
this.actualDistance=countDistance(this.sx, this.sy, this.x + x, this.y + y);
this.x +=x;
this.y +=y;
this.old.push({x:this.x, y:this.y});
if(this.distance < this.actualDistance) // 行走路径大于实际路径
return false; // 烟花到目标燃放点
else
return true; // 烟花未到目标燃放点
}
// 爆炸颗粒
function Particle(x, y, hue){
this.x=x;
this.y=y;
this.old=new Array(); // 记录步数
this.angle=random(0, 2 * Math.PI); // 任意角度
this.speed=random(1, 10); //随机速度
this.friction=0.95 //摩擦力
this.gravity=1; //重力
this.hue=random(hue - 20, hue + 20); //生成与烟花色彩相近的碎屑
this.brightness=random(50, 80); //随机明度
this.alpha=1; //初始透明度
this.decay=random(0.015, 0.03); //碎屑存在时间
}
// 爆炸颗粒更新
Particle.prototype.update=function(){
this.old.push({x:this.x, y:this.y});
this.speed *=this.friction; // 添加重力
this.x +=Math.cos(this.angle) * this.speed; // 计算下一步x轴
this.y +=Math.sin(this.angle) * this.speed + this.gravity; // 计算下一步y轴 + 重力
this.old.push({x:this.x, y:this.y});
this.alpha -=this.decay; // 每走一步消除碎屑透明度
if(this.alpha < this.decay){ // 碎屑透明度轻于碎屑存在时间
return false; // 烟花要消失
}else{
return true; // 烟花在燃放
}
}
// 爆炸颗粒工厂
function ParticleFactory(sx, sy, hue){
var array=new Array();
var size=random(50, 500); // 烟花数量
var scope=random(50, 500); // 烟花范围
for(var i=0 ; i < size ; i++){
array.push(new Particle(sx, sy, hue));
}
return array;
}
</script>
<!-- 工具类 -->
<script>
// 随机数
function random(min, max) {
return Math.random() * (max - min) + min;
}
// 随机颜色
function randomRgba(min, max) {
var r=random(0, 255);
var g=random(0, 255);
var b=random(0, 255);
var opacity=random(0.1, 1);
var color="rgba(" + r + ", " + g + ", " + b + ", " + opacity + ")";
return color;
}
// 计算角度
function countDistance(x, y, xx, yy) {
var a=x - xx;
var b=y - yy;
return Math.sqrt(a * a + b * b);
}
// 清空画布
function clear(){
// ctx.clearRect(0, 0, width, height);
ctx.globalCompositeOperation='destination-out';
ctx.fillStyle='rgba(0, 0, 0, 0.9)';
ctx.fillRect(0, 0, width, height);
ctx.globalCompositeOperation='lighter';
}
// 画线
function draw(obj){
ctx.beginPath();
ctx.moveTo(obj.old[obj.old.length-2].x, obj.old[obj.old.length-2].y);
ctx.lineTo(obj.x, obj.y);
var color='hsla(' + obj.hue + ',100%,' + obj.brightness + '%,' + obj.alpha + ')';
ctx.strokeStyle=color;
ctx.stroke();
}
</script>
</head>
<body>
<canvas style="background-color:black;" id="canvas"></canvas>
</body>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var width=window.innerWidth - 10, height=window.innerHeight - 10;
var widthBorder=width * 0.1;
var heightBorder=height * 0.1;
var hue=20;
canvas.width=width;
canvas.height=height;
canvas.onclick=function(){
moveParticle(ParticleFactory(event.x, event.y, hue+=10))
}
canvas.oncontextmenu=function(e){
e.preventDefault();
clear();
}
// 组合
function run(){
var x=width / 2;
var y=height;
var xx=random(widthBorder, width - widthBorder);
var yy=random(heightBorder, height - heightBorder);
var firework=new Firework(x, y, xx, yy, hue);
hue +=10;
moveFirework(firework);
}
// 烟花线
function moveFirework(f){
var id=setInterval(function(){
// 设置不画线
draw(f);
if(!f.update()){
draw(f);
clearInterval(id);
moveParticle(ParticleFactory(f.x, f.y, f.hue));
}
}, 100);
}
// 爆炸屑
function moveParticle(arr){
var id=setInterval(function(){
var i=arr.length;
var o=null;
if(i){
// clear();
}else{
clearInterval(id);
}
while(i--){
o=arr[i];
if(o.update()){
draw(o);
}else{
arr.splice(i, 1);
}
}
}, 70);
}
</script>
</html>
喜欢的一键三连哦!
果果为大家带来了
C/C++的学习基础教程及相关资源
(仅仅是部分截图哦)
节,作为全球华人最重要的传统节日,叠加7日连续休假的因素,可以在很多市场领域构成一个独特的相关时间市场。一些产品或服务只有在春节假期存在供给,一些产品或服务则会在春节假期迎来一年里的需求高峰。前者如笔者曾经在《央视春晚推广百度红包违反<反垄断法>吗?》中提到的除夕央视春晚,后者如春节档期电影(相关讨论参见《春节档+情人节+影院限座+……恐催生电影票价串谋 》《回眸(2018):谁是限制春节档电影票补的最大赢家 》)。
如果立足于以往国内的反垄断执法实践,最与春节密切相关的行业当属——烟花爆竹行业:
可见,至少从以往工商系统反垄断执法实践来看,烟花行业典型的限制竞争行为就是划分地域市场的垄断协议。这样的情况恐怕在全国范围并不少见,远不止上述三个公开的案例。上述三个案例中,只有河南固始县烟花爆竹行业垄断协议案没收了违法所得。而不罚没违法所得,违法成本低,这类违法行为反复发生,或者长期延续的可能性就比较高。
另一方面,由于以往工商系统反垄断执法只对非价格类垄断协议拥有管辖权,所以也不排除烟花行业还长期存在纵向或横向的限制价格竞争协议,但原发改委系统反垄断执法机构,或者现国家市场监督管理总局及地方市监局反垄断执法机构还没有发现,或者至少还没有公开结案。
值得注意的是,内蒙古自治区赤峰市烟花行业的垄断协议实际上与相关主管部门涉嫌存在滥用行政权力组织经营者实施限制竞争行为有关。所以,也不排除其他地区也存在类似情况,值得各地市监局关注。
到程序员,就会出现许多关键词,诸如“直男,宅,不懂浪漫,枯燥,憨厚老实,有逻辑,人傻钱多…………”
说程序猿是直男,不可否认,大多数程序猿都挺直,因为我们没有那么多弯弯绕绕,有心思兜圈子,不如回去写几行代码………
雷军曾经说“我喜欢写代码,代码的世界很简单”
程序猿的大多数时间都是面对电脑,所以对待一份感情也会非常的认真。程序猿也许在生活中会比较宅,就比如本人,但是千万不要说程序猿不懂浪漫。当你不开心了,他可以分分钟做出一个玫瑰花、心形等告白小程序给你制造小惊喜…………
程序员一旦浪漫起来,就真没其他人啥事了!接下来就给大家介绍一下程序猿是如何表白收获爱情的………
源码如下:
1 import turtle as t
2
3 def Curve_Draw(n,r,d=1):
4 for i in range(n):
5 t.left(d)
6 t.circle(r,abs(d))
7
8 s=0.2
9 t.setup(450*5*s,750*5*s)
10 t.pencolor('black')
11 t.fillcolor('purple')
12 t.speed(100)
13 t.penup()
14 t.goto(0,900*s)
15 t.pendown()
16
17 t.begin_fill()
18 t.circle(200*s,30)
19 Curve_Draw(60,50*s)
20 t.circle(200*s,30)
21 Curve_Draw(4,100*s)
22 t.circle(200*s,50)
23 Curve_Draw(50,50*s)
24 t.circle(350*s,65)
25 Curve_Draw(40,70*s)
26 t.circle(150*s,50)
27 Curve_Draw(20,50*s,-1)
28 t.circle(400*s,60)
29 Curve_Draw(18,50*s)
30 t.fd(250*s)
31 t.right(150)
32 t.circle(-500*s,12)
33 t.left(140)
34 t.circle(550*s,110)
35 t.left(27)
36 t.circle(650*s,100)
37 t.left(130)
38 t.circle(-300*s,20)
39 t.right(123)
40 t.circle(220*s,57)
41 t.end_fill()
42
43 t.left(120)
44 t.fd(280*s)
45 t.left(115)
46 t.circle(300*s,33)
47 t.left(180)
48 t.circle(-300*s,33)
49 Curve_Draw(70,225*s,-1)
50 t.circle(350*s,104)
51 t.left(90)
52 t.circle(200*s,105)
53 t.circle(-500*s,63)
54 t.penup()
55 t.goto(170*s,-30*s)
56 t.pendown()
57 t.left(160)
58 Curve_Draw(20,2500*s)
59 Curve_Draw(220,250*s,-1)
60
61 t.fillcolor('green')
62 t.penup()
63 t.goto(670*s,-180*s)
64 t.pendown()
65 t.right(140)
66 t.begin_fill()
67 t.circle(300*s,120)
68 t.left(60)
69 t.circle(300*s,120)
70 t.end_fill()
71 t.penup()
72 t.goto(180*s,-550*s)
73 t.pendown()
74 t.right(85)
75 t.circle(600*s,40)
76
77 t.penup()
78 t.goto(-150*s,-1000*s)
79 t.pendown()
80 t.begin_fill()
81 t.rt(120)
82 t.circle(300*s,115)
83 t.left(75)
84 t.circle(300*s,100)
85 t.end_fill()
86 t.penup()
87 t.goto(430*s,-1070*s)
88 t.pendown()
89 t.right(30)
90 t.circle(-600*s,35)
91 t.done()
源码如下:
1 import turtle as t
2
3 t.penup()
4 t.seth(-90)
5 t.fd(160)
6 t.pendown()
7 t.pensize(20)
8 t.colormode(255)
9 for j in range(10):
10 t.speed(1000)
11 t.pencolor(25*j,5*j,15*j)
12 t.seth(130)
13 t.fd(220)
14 for i in range(23):
15 t.circle(-80,10)
16 t.seth(100)
17 for i in range(23):
18 t.circle(-80,10)
19 t.fd(220)
20 t.done()
1.3 网页爱心树表白
代码过长,仅展示部分代码:
1 <body>
2
3 <audio autoplay="autopaly">
4
5 <source src="renxi.mp3" type="audio/mp3" />
6
7 </audio>
8
9 <div id="main">
10
11 <div id="wrap">
12
13 <div id="text">
14
15 <div id="code"> <font color="#FF0000"> <span class="say">浮世三千 吾爱有三 日月与卿</span><br>
16
17 <span class="say"> </span><br>
18
19 <span class="say">日为朝 月为暮 卿为朝朝暮暮</span><br>
20
21 <span class="say"> </span><br>
22
23 <span class="say">在这浮浮沉沉的大千世界里 我爱的只有三样</span><br>
24
25 <span class="say"></span><br>
26
27 <span class="say">太阳 月亮和我爱的你</span><br>
28
29 <span class="say"> </span><br>
30
31 <span class="say">太阳带给我们白昼和希望 月亮带给我们夜幕和宁静 </span><br>
32
33 <span class="say"> </span><br>
34
35 <span class="say"> 你与我的朝夕相伴 于我而言即是永恒 你是我一生挚爱</span><br>
36
37 <span class="say"></span><br>
38
39 <span class="say">一生爱一人很难,也不丢人</span><br>
40
41 <span class="say"> </span><br>
42
43 <span class="say"> 最美的爱情愿景不就是"愿得一心人 白首不相离"嘛</span><br>
44
45 <span class="say"> </span><br>
46
47 <span class="say"> 如果可以请牢记当初的爱情承诺 记住最初的美好</span><br>
48
49 <span class="say"> </span><br>
50
51 <span class="say">愿岁月静好 浅笑安然 一切美好如约而至</span><br>
52
53 <span class="say"> </span><br>
54
55 </font>
56
57
58
59 </div>
60
61 </div>
62
63 <div id="clock-box"> <span class="STYLE1"></span><font color="#33CC00">愿得一心人,白首不相离</font> <span class="STYLE1">这简单的话语……</span>
64
65 <div id="clock"></div>
66
67 </div>
68
69 <canvas id="canvas" width="1100" height="680"></canvas>
70
71 </div>
72
73 </div>
1.4 烟花表白
1.5 网页爱心表白
源码如下:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>爱心</title>
6 <style>
7 *{margin:0; padding:0;}
8 body{ background-color: #1E1E1E; }
9 </style>
10 </head>
11 <body>
12
13 <canvas id="drawHeart"></canvas>
14
15 <script>
16 var hearts=[];
17 var canvas=document.getElementById('drawHeart');
18 var wW=window.innerWidth;
19 var wH=window.innerHeight;
20 // 创建画布
21 var ctx=canvas.getContext('2d');
22 // 创建图片对象
23 var heartImage=new Image();
24 heartImage.src='img/heart.svg';
25 var num=100;
26
27 init();
28
29 window.addEventListener('resize', function(){
30 wW=window.innerWidth;
31 wH=window.innerHeight;
32 });
33 // 初始化画布大小
34 function init(){
35 canvas.width=wW;
36 canvas.height=wH;
37 for(var i=0; i < num; i++){
38 hearts.push(new Heart(i%5));
39 }
40 requestAnimationFrame(render);
41 }
42
43 function getColor(){
44 var val=Math.random() * 10;
45 if(val > 0 && val <=1){
46 return '#00f';
47 } else if(val > 1 && val <=2){
48 return '#f00';
49 } else if(val > 2 && val <=3){
50 return '#0f0';
51 } else if(val > 3 && val <=4){
52 return '#368';
53 } else if(val > 4 && val <=5){
54 return '#666';
55 } else if(val > 5 && val <=6){
56 return '#333';
57 } else if(val > 6 && val <=7){
58 return '#f50';
59 } else if(val > 7 && val <=8){
60 return '#e96d5b';
61 } else if(val > 8 && val <=9){
62 return '#5be9e9';
63 } else {
64 return '#d41d50';
65 }
66 }
67
68 function getText(){
69 var val=Math.random() * 10;
70 if(val > 1 && val <=3){
71 return '爱你一辈子';
72 } else if(val > 3 && val <=5){
73 return '感谢你';
74 } else if(val > 5 && val <=8){
75 return '喜欢你';
76 } else{
77 return 'I Love You';
78 }
79 }
80
81 function Heart(type){
82 this.type=type;
83 // 初始化生成范围
84 this.x=Math.random() * wW;
85 this.y=Math.random() * wH;
86
87 this.opacity=Math.random() * .5 + .5;
88
89 // 偏移量
90 this.vel={
91 x: (Math.random() - .5) * 5,
92 y: (Math.random() - .5) * 5
93 }
94
95 this.initialW=wW * .5;
96 this.initialH=wH * .5;
97 // 缩放比例
98 this.targetScale=Math.random() * .15 + .02; // 最小0.02
99 this.scale=Math.random() * this.targetScale;
100
101 // 文字位置
102 this.fx=Math.random() * wW;
103 this.fy=Math.random() * wH;
104 this.fs=Math.random() * 10;
105 this.text=getText();
106
107 this.fvel={
108 x: (Math.random() - .5) * 5,
109 y: (Math.random() - .5) * 5,
110 f: (Math.random() - .5) * 2
111 }
112 }
113
114 Heart.prototype.draw=function(){
115 ctx.save();
116 ctx.globalAlpha=this.opacity;
117 ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);
118 ctx.scale(this.scale + 1, this.scale + 1);
119 if(!this.type){
120 // 设置文字属性
121 ctx.fillStyle=getColor();
122 ctx.font='italic ' + this.fs + 'px sans-serif';
123 // 填充字符串
124 ctx.fillText(this.text, this.fx, this.fy);
125 }
126 ctx.restore();
127 }
128 Heart.prototype.update=function(){
129 this.x +=this.vel.x;
130 this.y +=this.vel.y;
131
132 if(this.x - this.width > wW || this.x + this.width < 0){
133 // 重新初始化位置
134 this.scale=0;
135 this.x=Math.random() * wW;
136 this.y=Math.random() * wH;
137 }
138 if(this.y - this.height > wH || this.y + this.height < 0){
139 // 重新初始化位置
140 this.scale=0;
141 this.x=Math.random() * wW;
142 this.y=Math.random() * wH;
143 }
144
145 // 放大
146 this.scale +=(this.targetScale - this.scale) * .1;
147 this.height=this.scale * this.initialH;
148 this.width=this.height * 1.4;
149
150 // -----文字-----
151 this.fx +=this.fvel.x;
152 this.fy +=this.fvel.y;
153 this.fs +=this.fvel.f;
154
155 if(this.fs > 50){
156 this.fs=2;
157 }
158
159 if(this.fx - this.fs > wW || this.fx + this.fs < 0){
160 // 重新初始化位置
161 this.fx=Math.random() * wW;
162 this.fy=Math.random() * wH;
163 }
164 if(this.fy - this.fs > wH || this.fy + this.fs < 0){
165 // 重新初始化位置
166 this.fx=Math.random() * wW;
167 this.fy=Math.random() * wH;
168 }
169 }
170
171 function render(){
172 ctx.clearRect(0, 0, wW, wH);
173 for(var i=0; i < hearts.length; i++){
174 hearts[i].draw();
175 hearts[i].update();
176 }
177 requestAnimationFrame(render);
178 }
179 </script>
180 </body>
181 </html>
*请认真填写需求信息,我们会在24小时内与您取得联系。