css3如何动态画⼀条直线_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( 1
2、画⼀棵树和草
使⽤html来画⼀棵树的话，需要很多个节点，性能和效果都很差。这⾥使⽤canvas来画树。
画树的教程，出过好⼏次了，这⾥就不在重写了。
基本原理就是，从⼀个点向⼀个⽅向画⼀条直线。从终点开始，重新这个流程。期间可以修改⼀个⾓度画出⼀分⽀。
草就更加简单。随便在底部画⼀些杂乱的直线。
// 画⼀棵树function drawTree(x, y, deg, step, type) {  var deg1 = step % 2 == 0 ? 0.1 : -0.1;  var x1 = x + s(deg + deg1) * (step + 5) * 0.9;  var y1 = y + Mat
3、⽔⾯的倒影
最简单的做法，就是使⽤DataUrl 拿到canvas的图⽚数据。在底部放⼀个反转的图⽚就可以。
我这⾥希望⽔⾯的倒影可以动起来。
新建⼀个canvas，使⽤ImageData拿到我们画好的树的像素点数据。
使⽤正弦给像素的x轴做⼀些偏移，得到⼀个新的数据。put到倒影的canvas上。
在使⽤requestAnimationFrame，做出⼀个流畅的左右摆动的倒影动画。
最后，在原数据基础上，增加⼀些杂⾊，使得倒影有⼀些⿊⽩的横线，模拟⽔波的⾼亮。
var startWave = 0 // ⽔波起始位置// 倒影增加⽔波纹效果function wave(star){  var newImgData = ateImageData(200,150)  var pos = 0  var source =
4、画星空
canvas动画
这个简单，就不再写代码了，就随意写⼀些⽩⾊的div，随机插⼊背景上。
其实到这⼀步，已经基本上完成了。
5、加⼀些流星
要画流星，需要画出⼀个渐渐变淡变窄的⽩线。
这⾥偷了个懒，在视觉效果上，⼀个渐渐变淡的⽩线，⼈眼看到，就感觉渐渐变窄。这⾥使⽤⽩⾊加透明渐变，画出⼀个流星的轮廓。加⼊从右到左动画效果。
再加⼊⼀个外包的div，做⼀下旋转和缩放。
效果完成
具体效果，建议查看原⽂。
代码仓库地址：
演⽰地址：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。