html canvas画三角形（csscanvas随便画一个星空）

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

先看效果：

开始需求分析：

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