先看效果：
开始需求剖析：
1、渐变色的背景
2、画一颗树和一些草
3、水面的倒影
4、随便画点星星
5、画一颗流星
1、渐变色的背景
先确定200500的区域，利用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
