誰說程式設計師沒有520？學學高階程式設計師都是怎麼表白的……
關注「實驗樓」，每天分享一個專案教程
誰說程式設計師只有程式碼和枸杞，今天讓你們看看什麼是程式設計師的浪漫……
正文共：3618 字
預計閱讀時間：7 分鐘
如果我是程式碼，那麼你就是我的main函式，沒有你，什麼都做不了。
昨天是520，一年一度的秀恩愛大會，又是各種大招亂放的節奏，單身狗們表示受到一萬點暴擊。
說什麼願得一人心，一往而情深……但對於程式設計師們……
520也不過是週末加班的平凡一天。
不過，真的不是程式設計師們不浪漫，是忙啊！忙！
鋪天蓋地的程式碼，臨到頭要交的專案……晚上匆匆吃個飯繼續埋頭通宵敲程式碼不過是日常。
但這絕對不會成為程式設計師們的藉口，相反，儘管工作很忙他們也會想盡辦法為女朋友準備驚喜。
比如這樣：
只要我人生的程式不終止，你的名字一直我的心事。
自從那天與你邂逅，我願往後生命的每一天裡都有你的烙印，至死方休。
若你不愛，默默守護，不打擾是我的溫柔；若你傾心，愛你是我一生的榮光。
或者這樣：
再或者設計一個小遊戲
@ LA pike第一關兩人相遇第二關兩人第一次約會第三關第一次出門旅遊……最後一關打敗瘋狂粉絲，成功回家甚至設計一款產品也不在話下
@泡泡
雖然520過了，但技術還是要學起來的
下面給大家分享一個超浪漫的程式設計師表白方式
煙花
@王興欣
1.屬性設計
煙花應有的三個狀態狀態：
升空
等待炸裂
炸裂後
煙花：發射點（x，y），爆炸點(xEnd，yEnd)，升空後等待炸裂時間（wait），炸裂後微粒個數（count），煙花半徑（radius）
煙花炸裂後微粒：自身位置（x，y），自身大小（size），自身速度（rate），最大煙花半徑（radius）。
config：為全域性變數，以及控制引數，包括畫布寬高，設定煙花屬性等。
2. 設定全域性變數
1. class Particle{
2. //預設值寫法
3. constructor({x, y, size = 1, radius = 1.2} = {}){
4. this.x = x;
5. this.y = y;
6. this.size = size;
7.
8. this.rate = Math.random(); //每個微粒移動的速度都是隨機不同的
9. this.angle = Math.PI * 2 * Math.random(); //每個微粒的偏移角度
10.
11. //每次微粒移動速度分解為橫縱座標的移動。
12. this.vx = radius * Math.cos(this.angle) * this.rate;
13. this.vy = radius * Math.sin(this.angle) * this.rate;
14. }
15.
16. go(){
17. this.x += this.vx;
18. this.y += this.vy;
19. this.vy += 0.02; //重力影響 y越大實際越偏下
20.
21. //空氣阻力
22. this.vx *= 0.98;
23. this.vy *= 0.98;
24. }
25.
26. //畫出微粒的位置
27. render(ctx){
28. this.go();
29. ctx.beginPath();
30. ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
31. ctx.fill();
32. }
33. }
3. 構建煙花類
1. class Firework{
2. constructor({x, y = config.height, xEnd, yEnd, count = 300, wait} = {}){
3. //煙花自身屬性
4. this.x = x || config.width / 8 + Math.random() * config.width * 3 / 4;
5. this.y = y;
6. this.xEnd = xEnd || this.x;
7. this.yEnd = yEnd || config.width / 8 + Math.random() * config.width * 3 / 8;
8. this.size = 2;
9. this.velocity = -3;
10.
11. this.opacity = 0.8;
12. this.color = `hsla(${360 * Math.random() | 0},80%,60%,1)`;
13. this.wait = wait || 30 + Math.random() * 30;
14. //微粒個數等
15. this.count = count;
16. this.particles = [];
17. this.createParticles();
18.
19. this.status = 1;
20. }
21. //建立微粒
22. createParticles(){
23. for(let i = 0;i < this.count; ++i){
24. this.particles.push(new Particle({x:this.xEnd, y:this.yEnd}));
25. }
26. }
27. //升空
28. rise(){
29. this.y += this.velocity * 1;
30. this.velocity += 0.005; //升空時產生的阻力
31. //煙花升空到目標位置開始漸隱
32. if(this.y - this.yEnd <= 50){
33. this.opacity = (this.y - this.yEnd) / 50;
34. }
35. //如果到了目標位置 就開始第二個狀態
36. if(this.y <= this.yEnd){
37. this.status = 2;
38. }
39. }
40.
41. //渲染煙花 煙花所有動作完成之後返回false
42. render(ctx){
43. switch(this.status){
44. case 1: //升空
45. ctx.save();
46. ctx.beginPath();
47. ctx.globalCompositeOperation = 'lighter';
48. ctx.globalAlpha = this.opacity;
49. ctx.translate(this.x, this.y);
50. ctx.scale(0.8, 2.3);
51. ctx.translate(-this.x, -this.y);
52. ctx.fillStyle = this.color;
53. ctx.arc(this.x + Math.sin(Math.PI * 2 * Math.random()) / 1.2, this.y, this.size, 0, Math.PI * 2, false);
54. ctx.fill();
55. ctx.restore();
56.
57. this.rise();
58. return true;
59. break;
60. case 2: //煙花消失階段，等待炸裂
61. if(--this.wait <= 0){
62. this.opacity = 1;
63. this.status = 3;
64. }
65. return true;
66. break;
67. case 3: //炸裂之後 渲染煙花微粒
68. ctx.save();
69. ctx.globalCompositeOperation = 'lighter';
70. ctx.globalAlpha = this.opacity;
71. ctx.fillStyle = this.color;
72. for(let i = 0;i < this.particles.length;++i){
73. this.particles[i].render(ctx);
74. }
75. ctx.restore();
76. this.opacity -= 0.01;
77. return this.opacity > 0;
78. break;
79. default:
80. return false;
81. }
82. }
83. }
4.放煙花
1. const canvas = {
2. init: function(){
3. //一些屬性的設定 可以不用管
4. this.setProperty();
5. this.renderBg();
6.
7. //迴圈體 **主要
8. this.loop();
9. },
10. setProperty: function(){
11. this.fireworks = [];
12. this.width = config.width;
13. this.height = config.height;
14. this.fireworkTime = (config.fireworkTime.min + (config.fireworkTime.max - config.fireworkTime.min) * Math.random()) | 0;
15.
16. this.bgCtx = document.querySelector('#bg').getContext('2d');
17. this.fireworkCtx = document.querySelector('#firework').getContext('2d');
18. },
19. renderBg(){
20. this.bgCtx.fillStyle = 'hsla(210, 60%, 5%, 0.9)'
21. this.bgCtx.fillRect(0, 0, this.width, this.height);
22. },
23.
24. loop(){
25. requestAnimationFrame(this.loop.bind(this));
26. this.fireworkCtx.clearRect(0, 0, this.width, this.height);
27.
28. //隨機建立煙花
29. if(--this.fireworkTime <= 0){
30. this.fireworks.push(new Firework(config.fireworkOpt));
31. //每次到點之後重新設定煙花產生時間 （|0轉化為整數）
32. this.fireworkTime = (config.fireworkTime.min + (config.fireworkTime.max - config.fireworkTime.min) * Math.random()) | 0;
33. }
34.
35. for(let i = this.fireworks.length - 1; i >= 0; --i){
36. //渲染煙花 （若返回值為false則移除煙花）
37. !this.fireworks[i].render(this.fireworkCtx) && this.fireworks.splice(i,1);
38. }
39.
40. }
41. }
42. canvas.init();
5.完善
此時煙花是這樣的，感覺少了點小尾巴。現在我們每一幀都是清除了畫布，如果要加上小尾巴其實也很簡單，每一幀都不要清除畫布，而是覆蓋一層新的有透明度的天空上去。
1. //canvas.loop方法
2.
3. // this.fireworkCtx.clearRect(0, 0, this.width, this.height);
4. this.fireworkCtx.fillStyle = config.skyColor;
5. this.fireworkCtx.fillRect(0,0,this.width,this.height);
這時就變成這樣了。但是，還是缺少了在爆炸瞬間天空變亮的場景。那麼在畫煙花的時候，先會獲取一下煙花的顏色以及透明度。
1. // *****Firework constructor
2. // this.color = `hsla(${360 * Math.random() | 0},80%,60%,1)`;
3. this.hue = 360 * Math.random() | 0;
4. this.color = `hsla(${this.hue},80%,60%,1)`;
1. // *****Firework 新增例項方法
2. getSkyColor(){
3. const skyColor = {
4. //只有炸裂階段才返回亮度
5. lightness: this.status == 3 ? this.opacity : 0 ,
6. hue: this.hue
7. };
8. return skyColor;
9. }
1. // *****config 修改config的skyColor
2. // skyColor: 'hsla(210, 60%, 5%, 0.2)',
3. skyColor: 'hsla({hue}, 60%, {lightness}%, 0.2)',
1. // canvas.loop方法
2. //this.fireworkCtx.fillStyle = config.skyColor;
3. //每次替換色調與亮度值。
4. this.fireworkCtx.fillStyle = config.skyColor.replace('{lightness}', 5 + this.skyColor.lightness * 15).replace('{hue}' , this.skyColor.hue);
5.
6. this.skyColor = { //新增
7. lightness: 0,
8. hue: 210
9. };
10. for(let i = this.fireworks.length - 1; i >= 0; --i){
11. //新增 天空顏色為最亮的煙花的顏色
12. this.skyColor = this.skyColor.lightness >= this.fireworks[i].getSkyColor().lightness ? this.skyColor : this.fireworks[i].getSkyColor();
13. !this.fireworks[i].render(this.fireworkCtx) && this.fireworks.splice(i,1);
14. }
大功告成。
作者：sugarain
文中部分內容整理自網路
學習更多
樓+「 Python實戰 」、「 Linux運維與Devops實戰 」優惠報名中——來自騰訊、Intel、IBM等網際網路大廠的一線大牛，帶你12周內打通Python、Linux的任督二脈！
點選下面的連結瞭解詳情：
他在一線網際網路大廠研發PHP數年，用6周時間帶你打通“全宇宙最好的語言”
相關文章
- 誰說程式設計師找不到女朋友，程式設計師明明那麼有市場！程式設計師
- 怎麼從初、中級Java程式設計師過渡到高階Java程式設計師？Java程式設計師
- 【1024程式設計師節】程式設計師，你學程式設計的初衷是什麼？程式設計師
- 如何從初級程式設計師變成高階程式設計師？程式設計師
- 程式設計師程式設計入門一定知道！程式設計師需要學什麼？程式設計師
- 程式設計師的工資高，到底程式設計師的工資有多高？程式設計師
- 程式設計師的數學程式設計師
- 程式設計師的哲學程式設計師
- “程式設計師數學不行，幹啥都不行！”高階開發：90%都是瞎努力！程式設計師
- 為什麼高階程式設計師討厭程式設計面試？ - Adam程式設計師面試
- 如何從初級程式設計師順利晉升到高階程式設計師？程式設計師
- 五分鐘自學程式設計：程式設計師到底怎麼學資料結構？！程式設計師資料結構
- 為什麼說程式設計師做外包沒前途？程式設計師
- 如果今天沒有API介面，今天的程式設計師如何程式設計？API程式設計師
- Java程式設計師學習Rust程式設計 - infoworldJava程式設計師Rust
- 高階程式設計師到底強在哪裡？程式設計師
- 如何成為高階java程式設計師Java程式設計師
- 程式設計師只配加班？有錢有閒的程式設計師都在哪？程式設計師
- 好程式設計師web前端分享H5高階工程師學習思路程式設計師Web前端H5工程師
- 程式設計師到底有沒有必要考研程式設計師
- 程式設計師到底有沒有女朋友？程式設計師
- 不想做程式設計師學習python有什麼用途?程式設計師Python
- 好程式設計師分享-疫情過後 學哪個程式設計有前景程式設計師
- 菜鳥程式設計師都是怎樣寫程式碼的？你也可以學一手程式設計師
- 好程式設計師Java培訓Java程式設計師必學技術程式設計師Java
- 論跟程式設計師談話的技巧：千萬不要跟程式設計師說，你的程式碼有bug程式設計師
- 誰再黑程式設計師我就打誰程式設計師
- 程式設計師的進階之路程式設計師
- 數學，離一個程式設計師有多近？程式設計師
- PHP 程式設計師的堆學習PHP程式設計師
- 對於Adobe平面設計證書，高階平面設計師，有話說
- 學Python的程式設計師，程式設計能力都“退化”成什麼樣了？Python程式設計師
- 高階程式設計師的七大特徵，你有幾條？程式設計師特徵
- java程式設計師程式設計筆試基礎學習Java程式設計師筆試
- 程式設計師的高產之路程式設計師
- 以前的程式設計師，現在的程式設計師程式設計師
- 低學歷不適合做程式設計師？專科與本科程式設計師之間有什麼區別？程式設計師
- 大學教程式設計的老師為何不去當高收入的程式設計師？程式設計師