canvas流星雨数据流

canvas数据直线流动

最近做平台优化的时候，有两个涉及到了canvas的需求，初有成效，在此分享下。先看需求效果（如下图 ps:用手机视频做的动图请忽略粗糙的观感）大概的意思是背景图中的城市空中有很多的数据衔接，之前就是单纯的一张效果背景图，现在产品让优化下，添加些动态效果，于是乎就想到了用canvas

首先声明以下所需要的变量

const numberLine = 56;//光线数量
const tail = 400; //光线长度
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
// 创建img对象 引如背景图
var img = new Image();img.src = "./img/zhiNengSouSuo_back.png";
//设置画布长宽
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

canvas绘制线条的时候是靠moveTo和lineTo属性，所以现在随机生成一组线条坐标

//n为传如的生成线条的个数
const createLine = n => {const line = [];for (let i = 0; i < n; ++i) {line.push({x: Math.random() * canvas.width,y: Math.random() * canvas.height,s: Math.random() * 2 + 1});}return line;
};

有了坐标点，然后开始绘制

const render = line => {var bg = ctx.createPattern(img, "no-repeat");//createPattern() 方法在指定的方向内重复指定的元素。ctx.fillStyle = bg;//fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。ctx.fillRect(0, 0, canvas.width, canvas.height);//定义了矩形当前的填充方式。for (let l of line) {renderLine(l);}
};
const renderLine = l => {//设置线条渐变const grad = ctx.createLinearGradient(l.x, l.y, l.x, l.y + tail);//添加颜色时直接时候能够色值的时候效果很生硬，所以用hsla色值//简单介绍一下//H（色调：Hue）：衍生于色盘，其中0和360是红色，接近120的是绿色，240是蓝色；//S（饱和度：Saturation）：值为一个百分比数，0%代表灰度，100%代表最高饱和度；//L（亮度：Lightness）：值也为一个百分比数，其中0%代表最暗，50%为均值，100%表示最亮。//A（透明度：Alpha）：值为0~1之间的一个数，其中0代表不透明，1代表完全透明const a = 1 - (canvas.height - l.y) / canvas.height * 0.8;grad.addColorStop(0, `hsla(202,100%,100%,${a})`);grad.addColorStop(1, "hsla(202,100%,50%,0)");ctx.strokeStyle = grad;ctx.beginPath();ctx.lineWidth=2.5;ctx.moveTo(l.x, l.y);ctx.lineTo(l.x, l.y + tail);ctx.stroke();
};
render(createLine(numberLine));

此时，可以看到的效果如下

接下来就需要让这些线段动起来，window有一个requestAnimationFrame方法，可以执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
那么我们把他加进来

const render = line => {var bg = ctx.createPattern(img, "no-repeat");//createPattern() 方法在指定的方向内重复指定的元素。ctx.fillStyle = bg;//fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。ctx.fillRect(0, 0, canvas.width, canvas.height);for (let l of line) {renderLine(l);}requestAnimationFrame(() => render(line));
};

然而刷新之后，线条并没有按预想的动起来，是因为我们么有去更新线条的moveTo和lineTo，那就再把这个加进来

const updateLine = l => {//改变之前生成线条的坐标值l.y -= l.s;if (l.y < -tail) {l.y = canvas.height;}
};

将之放在render 中，每次renderLine之后就更新。如此数据线条就动起来了。完整代码可以到码云查看link

canvas流星雨数据流相关推荐

Canvas流星雨特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
html5星星效果图,H5 canvas流星雨星星特效
/p> 一起来看流星雨 var context; var arr = new Array(); var starCount = 800; var rains = new Array(); var ...
流星雨html5,HTML5/Canvas 流星雨+爱心绽放
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 (function() { var boomLength, ctx, descending, ele, he ...
webrtc+canvas+socket.io从零实现一个你画我猜 | 掘金技术征文
开场白最近键盘坏了,刚好看到掘金有声网的技术征文,想整个键盘.于是就开始从零开始学习webrtc, 一开始看文档就是个素质三连.这么难啊,这咋整啊,这谁顶的住啊.于是就开始全网找资料,很幸运的在掘金 ...
Polyv视频下载 · 初探
声明:文章内容仅供学习交流. 通过开发者工具查看网站,不难发现,Polyv视频是使用canvas标签来渲染视频画面的,音频是通过AudioContext进行播放的. 此外,网站的视频是加密的,如果想要 ...
2022圣诞节用canvas实现流星雨
时光过得飞快,不知不觉中,充满期望的2022年就伴随着新年伊始即将临近,感谢陪伴CSDN尔嵘! 前言: 2022圣诞节用 canvas实现流星雨! 正文: 1.效果:
html5 流星雨,canvas简单流星雨
function lx(obj) { this.Id = obj.id; this.src = obj.src; //图片地址 this.img = ''; //图片 this.cxt = ''; / ...
canvas绘制流星雨
偶然看到用canvas绘制流星雨,好好看呀! 遇上一个人,只需擦肩而过的缘分:喜欢一个人,只需一见钟情的瞬间:爱上一个人只需流星划过的刹那: <!DOCTYPE html> <htm ...
用canvas在vue实现流星雨效果（移动端）
效果网站最近给女朋友写了一个网站,说这句话呢主要是想显摆我有女朋友,好了进入正题:我写的网站是针对移动端写的所以角度记忆大小,还要劳烦各位亲自改一下. 首先,流星雨就是多个流星下落,然后来想一下他是怎 ...

canvas流星雨数据流

canvas数据直线流动

canvas流星雨数据流相关推荐

最新文章

热门文章

canvas流星雨 数据流

canvas数据直线流动

canvas流星雨 数据流相关推荐

最新文章

热门文章

canvas流星雨数据流

canvas流星雨数据流相关推荐