鳥網(wǎng)作者：rockidz

出自蜂鳥網(wǎng)-風(fēng)光攝影，原貼鏈接：https://m.fengniao.com/thread/10753492.html

第一次拍星空 SONY A5100+適馬S30 1.4 到郊區(qū)后發(fā)現(xiàn)視野確實(shí)太小了 而且銀河在頭頂 根本拍不到銀河跟地景在同一張照片里

于是拍了27張回去再拼起來 分別從車頭 車身 車尾三列往上拍

每列拍到頭頂需要拍9張 相鄰照片大概有40%左右的重合后期方便接圖

誰知回去之后又出狀況 一是電腦是XP系統(tǒng) 只能安裝舊版本的PS跟LR 但舊版本的軟件又不識(shí)別索尼的raw文件（arw格式）

二是打算退一步拼jpg算了 又發(fā)現(xiàn)自己根本拼不起來。。。以前沒什么拼圖經(jīng)驗(yàn) 這次也太多照片了

于是求助萬能的淘寶 付了80塊錢后幫我拼成了這樣~

但總感覺這星空跟我看的好像不太一樣~

算了 下次還是入手三陽12再拍星空了 視野太小拍星空麻煩事太多

雖然折騰了好多 但總算有張成品圖出來 求大神指點(diǎn)！

歡迎關(guān)注 蜂鳥網(wǎng)微信公眾號(hào)：fengniaoweixin

天躺在床上刷抖音的時(shí)候，看見了一個(gè)馬克筆隨便畫星空的視頻，很有意思。

先看效果：

開始需求分析：

1、漸變色的背景

2、畫一顆樹和一些草

3、水面的倒影

4、隨便畫點(diǎn)星星

5、畫一顆流星

1、漸變色的背景

先確定200*500的區(qū)域，使用css3的線性漸變屬性，依次深藍(lán)、淺藍(lán)、紫色、粉色、黃色畫出一個(gè)漸變色的背景。

為了使背景更真實(shí)，使用同樣的顏色順序，在不同的角度，加上一些模糊和透明。再畫一遍重疊起來。

再重疊一層黑色，使畫布更暗一些。

.bg-color {
  background-image: linear-gradient(170deg, #000093 13%, #9f35ff, #ff8000 70%, #f9f900 );
}
.bg-color2 {
  background-image: linear-gradient( 180deg, #000093 13%, #9f35ff, #ff8000 80%, #f9f900 );
  opacity: 0.3;
  filter: blur(6px);
}
.bg-color3 {
  background: rgba(0,0,0,.2);
}

2、畫一棵樹和草

使用html來畫一棵樹的話，需要很多個(gè)節(jié)點(diǎn)，性能和效果都很差。這里使用canvas來畫樹。

畫樹的教程，公眾號(hào)出過好幾次了，這里就不在重寫了。

基本原理就是，從一個(gè)點(diǎn)向一個(gè)方向畫一條直線。從終點(diǎn)開始，重新這個(gè)流程。期間可以修改一個(gè)角度畫出一分支。

草就更加簡(jiǎn)單。隨便在底部畫一些雜亂的直線。

// 畫一棵樹
function drawTree(x, y, deg, step, type) {
  var deg1 = step % 2 == 0 ? 0.1 : -0.1;
  var x1 = x + Math.cos(deg + deg1) * (step + 5) * 0.9;
  var y1 = y + Math.sin(deg + deg1) * (step - 1) * 0.9;
  ctx.beginPath();
  ctx.lineWidth = step / 3;
  ctx.moveTo(x, y);
  ctx.lineTo(x1, y1);
  ctx.stroke();
  if (step > 12) {
    ctx.arc(x, y, step / 6, 0, Math.PI * 2);
    ctx.fill();
  }
  if (step < 3 && Math.random() > 0.7) {
    var r = 2 + Math.random() * 2;
    ctx.arc(x1 + Math.random() * 3, y1 + Math.random() * 3, r, r, Math.PI + r);
    ctx.fill();
  }
  step--;
  if (step > 0) {
    drawTree(x1, y1, deg, step, type);
    if (step % 2 == 1 && step < 17)
      drawTree(x1, y1, deg + 0.2, Math.round(step / 1.13));
    if (step % 2 == 0 && step < 17)
      drawTree(x1, y1, deg - 0.2, Math.round(step / 1.13) );
  }
}

3、水面的倒影

最簡(jiǎn)單的做法，就是使用canvas.toDataUrl 拿到canvas的圖片數(shù)據(jù)。在底部放一個(gè)反轉(zhuǎn)的圖片就可以。

我這里希望水面的倒影可以動(dòng)起來。

新建一個(gè)canvas，使用ctx.getImageData拿到我們畫好的樹的像素點(diǎn)數(shù)據(jù)。

使用正弦給像素的x軸做一些偏移，得到一個(gè)新的數(shù)據(jù)。put到倒影的canvas上。

在使用requestAnimationFrame，做出一個(gè)流暢的左右擺動(dòng)的倒影動(dòng)畫。

最后，在原數(shù)據(jù)基礎(chǔ)上，增加一些雜色，使得倒影有一些黑白的橫線，模擬水波的高亮。

var startWave = 0 // 水波起始位置
// 倒影增加水波紋效果
function wave(star){
  var newImgData = ctxShadow.createImageData(200,150)
  var pos = 0
  var source = 0
  startWave += 0.2
  start = startWave
  for(var y = 0 ; y < CANVAS_HEIGHT ; y ++) {
    start += 0.5
    for(var x = 0 ; x < CANVAS_WIDTH ; x ++) {
      pos = (y * CANVAS_WIDTH + x) * 4
      source = (y * CANVAS_WIDTH + x + Math.round(Math.sin(start)* 1.5)) * 4
      newImgData.data[pos + 0] = imgData.data[source + 0];
      newImgData.data[pos + 1] = imgData.data[source + 1];
      newImgData.data[pos + 2] = imgData.data[source + 2];
      newImgData.data[pos + 3] = imgData.data[source + 3];
    }
  }
  ctxShadow.putImageData(newImgData,0,0)
  requestAnimationFrame(wave)
}

4、畫星空

這個(gè)簡(jiǎn)單，就不再寫代碼了，就隨意寫一些白色的div，隨機(jī)插入背景上。

其實(shí)到這一步，已經(jīng)基本上完成了。

5、加一些流星

要畫流星，需要畫出一個(gè)漸漸變淡變窄的白線。

這里偷了個(gè)懶，在視覺效果上，一個(gè)漸漸變淡的白線，人眼看到，就感覺漸漸變窄。

這里使用白色加透明漸變，畫出一個(gè)流星的輪廓。加入從右到左動(dòng)畫效果。

再加入一個(gè)外包的div，做一下旋轉(zhuǎn)和縮放。

效果完成?。。?！

具體效果，建議查看原文。

代碼倉庫地址：

https://github.com/shb190802/html5

演示地址：

http://suohb.com/demo/win/starrySky.html