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

先看效果：

开始需求分析：

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