沿曲线运动的彗星拖尾效果实现Demo（JavaScript）

工作中要做一个大屏展示界面（HTML），要将信息发送过程要用动画示意出来，采用canvas实现。要实现的效果大致如下：

经过翻阅其他博主的文章，修改了一个版本。参考相关博文如下（不分先后顺序）：

---------------------------------------------------------------------

canvas 航线、彗星扫尾轨迹效果（主要参考）

计算贝塞尔曲线上点坐标（主参考）

markline.js——轻量级canvas绘制标记线的库

canvas抛物线运动轨迹

动画—圆形扩散、运动轨迹

必须要理解掌握的贝塞尔曲线（原创）

贝塞尔曲线原理(实现图真漂亮)

canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)

---------------------------------------------------------------------

基本思路：

1、路径通过贝塞尔曲线表示，通过定义控制点绘制出路径所有坐标点

2、通过点与点的连线近似画出路径

3、通过点与点的时间递进画出彗星扫尾动画效果

改写后的Demo示例代码如下：

<!DOCTYPE HTML>
<html lang="en"><head><meta charset="UTF-8"><title></title><style type="text/css">html, body { padding: 0; margin: 0; } canvas { border: 1px solid red;}</style></head><body><canvas id="canvas" width="800" height="600"></canvas><script type="text/javascript">function Point(x, y) {this.x = x;this.y = y;}Point.prototype.toString = function() {return '(' + this.x + ', ' + this.y + ')';}/*** @param poss      贝塞尔曲线控制点坐标:Array<Point>* @param precision 精度，需要计算的该条贝塞尔曲线上的点的数目:number* @return 该条贝塞尔曲线上的点（二维坐标）*/function bezierCalculate(poss, precision) {//维度，坐标轴数（二维坐标，三维坐标...）var dimersion = 2;//贝塞尔曲线控制点数（阶数）var number = poss.length;//控制点数不小于 2 ，至少为二维坐标系if (number < 2 || dimersion < 2) return null;var result = new Array();//计算杨辉三角var mi = new Array();mi[0] = mi[1] = 1;for (var i = 3; i <= number; i++) {var t = new Array();for (var j = 0; j < i - 1; j++) {t[j] = mi[j];}mi[0] = mi[i - 1] = 1;for (var j = 0; j < i - 2; j++) {mi[j + 1] = t[j] + t[j + 1];}}//计算坐标点for (var i = 0; i < precision; i++) {var t = i / precision;var p = new Point(0, 0);result.push(p);for (var j = 0; j < dimersion; j++) {var temp = 0.0;for (var k = 0; k < number; k++) {temp += Math.pow(1 - t, number - k - 1) * (j == 0 ? poss[k].x: poss[k].y) * Math.pow(t, k) * mi[k];}j == 0 ? p.x = temp: p.y = temp;}}return result;}var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var cwidth = canvas.width;var cheight = canvas.height;//定义一条带贝塞尔曲线的路径var line1cp = new Array();line1cp.push(new Point(0, 300));//路径起点line1cp.push(new Point(50 + 50, 300));//平滑点位分布用line1cp.push(new Point(50 + 100, 300));//平滑点位分布用line1cp.push(new Point(50 + 150, 300));//平滑点位分布用line1cp.push(new Point(50 + 200, 300));//起点到当前点是直线部分，同时也是第一个弯角控制点1（如果觉得点位分布不够平滑，可在此之前额外加一些点来绘制直线部分）line1cp.push(new Point(100 + 200, 250));//第一个弯角曲线的控制点2line1cp.push(new Point(100 + 200, 200));//第一个弯角曲线的控制点3line1cp.push(new Point(100 + 200, 100));//第一个弯角曲线的控制点3到当前点是直线部分，同时也是第二个弯角控制点1line1cp.push(new Point(100 + 200, 50));//第二个弯角控制点2line1cp.push(new Point(150 + 200, 50));//第二个弯角控制点3line1cp.push(new Point(150 + 250, 50));//平滑点位分布用line1cp.push(new Point(150 + 300, 50));//路径终点var line1 = bezierCalculate(line1cp, 200);//得到上述路径上的N个点来近似描述该矢量路径///regin#以下代码将在canvas上绘制路径和实现动画效果//所谓彗星效果就是一组以路径上点为圆心的圆，彗星拖长短取决于存放彗星构成点的数组大小var bubbleNum = 0,t = 0;//小球运动轨迹信息数组var bubbles = [{a: 1,//透明度s: 1,//圆尺寸x: 1,//圆心X坐标y: 1//圆心Y坐标}];//循环彗星动画方法function draw() {t++;bubbleNum++;//清空画布ctx.clearRect(0, 0, 5000, 5000);//定义路径线段粗细ctx.lineWidth = 2;//定义画笔的颜色ctx.strokeStyle = 'green'//画出前面定义的路径（采用点与点之间直线连接，模拟实现路径，只要点与点之间距离不大于一个像素，就可以真实模拟）ctx.beginPath();for (var l1 = 0; l1 < line1.length - 1; l1++) {ctx.moveTo(line1[l1].x, line1[l1].y);ctx.lineTo(line1[l1 + 1].x, line1[l1 + 1].y);}ctx.stroke();//以下代码将绘制彗星//首先，如果彗星数组元素超过50，则移除最早加进来的坐标，保持彗星长度为50if (bubbleNum > 50) {bubbles.shift()}//更新当前彗星数组中的透明度和圆尺寸定义for (var i = 0; i < bubbles.length; i++) {bubbles[i].a = (i + 1) * 0.05;bubbles[i].s = (i + 1) * 0.03;}//获取当前的贝塞尔曲线坐标var x = line1[t].x;var y = line1[t].y;var b = {a: 1,//透明度s: 1,//圆尺寸x: x,//圆心X坐标y: y//圆心Y坐标};//将取到的下一个彗星头部加入到彗星数据定义中bubbles.push(b);//渲染彗星定义数据for (var j = 0; j < bubbles.length; j++) {var b = bubbles[j];ctx.save();ctx.beginPath();ctx.globalAlpha = b.a; // 值是0-1,0代表完全透明，1代表完全不透明ctx.fillStyle = 'greenyellow';ctx.arc(b.x, b.y, b.s * 4, 0, 2 * Math.PI, false);ctx.fill();ctx.restore();}//若彗星移动到了路径末尾则从头开始if (t == line1.length - 1) {t = 0;}requestAnimationFrame(draw);}//开始绘制canvasdraw();</script></body></html>

沿曲线运动的彗星拖尾效果实现Demo（JavaScript）相关推荐

触摸屏幕实现拖尾效果
最近做了一个手指触摸手机屏幕,实现拖尾效果的Demo,主要就用到了自定义绘制. 首先定义一个类来存储触摸屏幕时的位置 package com.example.aa;/**** 记录手指触摸屏幕时的位 ...
Cocos Creator 的实现拖尾效果
在游戏中,有时会需要在某个游戏对象上加上移动后的轨迹若隐若现的效果.使得游戏的效果较好,比如游戏大招,刀光,法术,流星划痕之类. Cocos Creator提供了一种内置的拖尾渐隐效果的实现方法:组件 ...
HTML5 canvas 拖尾效果（或尾巴或方向标或留痕。。。）
[canvas]带拖尾效果的旋转扩散使用 HTML5 canvas 制作一个圆形的拖尾,以及附加上拖尾的扩散效果我说说的拖尾,就是拖着一个尾巴,其他简短的名词暂时想不到了.下图效果弄出来,着实费劲 ...
shader拖尾_插件（一）武器拖尾效果
工作交接的空余时间,刚好有空,就有兴趣看了看U3D的武器拖尾功能,没想到有插件.下载地址: Pocket+RPG+Weapon+Trails.unitypackage PocketRPG Trails ...
Processing残影拖尾效果实现套路分享
今天小菜给大家分享下实现残影.拖尾效果的几种实现思路,或者叫固定套路,保准大家认真看完后,以后再也不怕实现残影.拖尾效果了. 本文字数比较多,且部分内容需要阅读代码加以思考,预计阅读10-15分钟.( ...
Unity Shader - GrabPass 实现武器热扭曲拖尾效果
文章目录先来看看效果实现思路 Unity带的TrailRender组件编写脚本实现 CSharp Shader 参数注意性能还可以优化总结 Project 以前龙之谷喜欢选战士,帅气. 战 ...
Unity初级案例-愤怒的小鸟:四:11解决重复划线和小鸟轮换速度突然变大的问题+12添加小鸟飞出的拖尾效果+13整合场景和解决无法显示划线弹弓的问题
目录一.目的 1.想知道:愤怒的小鸟:如何制作 2.做好学习笔记,方便下次查看二.参考 1.SIKI学院三.注意 1.版本操作:1:11解决重复划线和小鸟轮换速度突然变大的问题 1.GameM ...
html鼠标拖尾效果,javascript canvas拖尾效果
{$title} var lujinglist = []; //制作路径 for (var x = 10; x <= 300; x++) { var dian = [x, 50]; lujing ...
纯js实现鼠标拖尾效果（好玩又简单，一学就会）
js特效-鼠标滑动的拖尾效果 <script>//鼠标移动事件(document范围内移动)document.onmousemove=function(event){//1.创建divva ...

沿曲线运动的彗星拖尾效果实现Demo（JavaScript）

沿曲线运动的彗星拖尾效果实现Demo（JavaScript）相关推荐

最新文章

热门文章