css+canvas 随便画一个星空

今天躺在床上刷抖音的时候，看见了一个马克笔随便画星空的视频，很有意思。

先看效果：

开始需求分析：

1、渐变色的背景

2、画一颗树和一些草

3、水面的倒影

4、随便画点星星

5、画一颗流星

1、渐变色的背景

先确定200*500的区域，使用css3的线性渐变属性，依次深蓝、浅蓝、紫色、粉色、黄色画出一个渐变色的背景。

为了使背景更真实，使用同样的颜色顺序，在不同的角度，加上一些模糊和透明。再画一遍重叠起来。

再重叠一层黑色，使画布更暗一些。

.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来画一棵树的话，需要很多个节点，性能和效果都很差。这里使用canvas来画树。

画树的教程，公众号出过好几次了，这里就不在重写了。

基本原理就是，从一个点向一个方向画一条直线。从终点开始，重新这个流程。期间可以修改一个角度画出一分支。

草就更加简单。随便在底部画一些杂乱的直线。

// 画一棵树
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、水面的倒影

最简单的做法，就是使用canvas.toDataUrl 拿到canvas的图片数据。在底部放一个反转的图片就可以。

我这里希望水面的倒影可以动起来。

新建一个canvas，使用ctx.getImageData拿到我们画好的树的像素点数据。

使用正弦给像素的x轴做一些偏移，得到一个新的数据。put到倒影的canvas上。

在使用requestAnimationFrame，做出一个流畅的左右摆动的倒影动画。

最后，在原数据基础上，增加一些杂色，使得倒影有一些黑白的横线，模拟水波的高亮。

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、画星空

这个简单，就不再写代码了，就随意写一些白色的div，随机插入背景上。

其实到这一步，已经基本上完成了。

5、加一些流星

要画流星，需要画出一个渐渐变淡变窄的白线。

这里偷了个懒，在视觉效果上，一个渐渐变淡的白线，人眼看到，就感觉渐渐变窄。

这里使用白色加透明渐变，画出一个流星的轮廓。加入从右到左动画效果。

再加入一个外包的div，做一下旋转和缩放。

效果完成！！！！

具体效果，建议查看原文。

代码仓库地址：

https://github.com/shb190802/html5

演示地址：

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