今天躺在床上刷抖音的时候，看见了一个马克笔随便画星空的视频，很有意思。
先看效果：
开始需求分析：
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