canvas拖尾效果

canvas实现粒子的拖尾效果

/*** @Author   SuZhe* @DateTime 2019-03-15* @desc     兼容 requestAnimFrame* @return   {[Function]}    requestAnimFrame不兼容的浏览器使用定时器代替*/
window.requestAnimFrame = (function(){return  window.requestAnimationFrame       ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame    ||function( callback ){window.setTimeout(callback, 1000 / 60);};
})();/**
* @Author   SuZhe
* @DateTime 2019-03-15
* @desc     椭圆动画效果  star运动
* @param    {[Object]}   canvasId [画布布id]
*/
function CanvasAnimation(param){if(param.ele){this.canvas = param.ele;this.cxt = this.canvas.getContext('2d');this.param = param;if(param.type){//starthis.starArr = [[],[],[],[]];  //star数量集合this.step = [80,-40,40,260];  //步长位置集合this.color = ['230,116,182','80,238,207','235,149,89','68,192,240']; //颜色集合}else{// arcthis.a = 168; //长 半 径this.b = 53;  //短 半 径this.posi = []; //位置集合this.posiNext = [];this.radius = 2;this.time = 0; //步长}this.animation();}
}
CanvasAnimation.prototype = {animation: function(){var that = this;if(this.param.type){//starthis.starAni();}else{//arcthis.draw();this.drawNext();}window.requestAnimFrame(function(){that.animation();});},draw: function(){var y = 56,posi = this.posi;this.cxt.clearRect(0,0,340,160);this.trail(y,posi);this.time+=0.02;},drawNext: function(){var y = 106,posi = this.posiNext;this.trail(y,posi,true);},trail: function(y,posi,next){var context = this.cxt,x = 170,a,b,param = {};if(next){a = -this.a;b = -this.b;}else{a = this.a;b = this.b;}//圆弧坐标param.arcX = x + a*Math.cos(this.time),param.arcY = y + b*Math.sin(this.time);posi.push(param);if(posi.length > 25){posi.shift();}for(var i = 0, len = posi.length; i < len; i++){var alphar = 1;if(i < len-1){alphar = i/30;}if(next){context.fillStyle="rgba(255, 204, 0, "+alphar+")";}else{context.fillStyle="rgba(0, 246, 255, "+alphar+")";}context.beginPath();context.arc(posi[i].arcX,posi[i].arcY,this.radius,0,2*Math.PI);context.closePath();context.fill();}},starAni: function(){var context = this.cxt,posi = this.starArr,starNum = [{},{},{},{}];context.clearRect(0,0,700,462);for(var k = 0, lens = starNum.length; k < lens; k++){starNum[k].x = 90 * k * 2 + 40;starNum[k].y = 462 - this.step[k];if(starNum[k].y < 0){this.step[k] = 0;}posi[k].push(starNum[k]);if(posi[k].length > 45){posi[k].shift();}for(var j = 0, len = posi[k].length; j < len; j++){var alphar = 1,redius = 2.5;if(j < len - 1){alphar = j/50;redius = j/48 *2 ;}if(j == len-1){context.shadowOffsetY=-2;context.shadowOffsetX=0;context.shadowBlur=10;context.shadowColor="rgb("+this.color[k]+")";}context.fillStyle="rgba("+this.color[k]+", "+alphar+")";context.beginPath();context.arc(posi[k][j].x,posi[k][j].y,redius,0,2*Math.PI);context.closePath();context.fill();}this.step[k] += 2;}}
}

<canvas class="canvas" width="340" height="160"></canvas>var arc = new CanvasAnimation({ele:document.getElementsByClassName('canvas')[0]});
<canvas class="canvasStar" width="700" height="462"></canvas>var star = new CanvasAnimation({ele: document.getElementsByClassName('canvasStar')[0],type: 'star'});

canvas拖尾效果相关推荐

html鼠标拖尾效果,javascript canvas拖尾效果
{$title} var lujinglist = []; //制作路径 for (var x = 10; x <= 300; x++) { var dian = [x, 50]; lujing ...
HTML5 canvas 拖尾效果（或尾巴或方向标或留痕。。。）
[canvas]带拖尾效果的旋转扩散使用 HTML5 canvas 制作一个圆形的拖尾,以及附加上拖尾的扩散效果我说说的拖尾,就是拖着一个尾巴,其他简短的名词暂时想不到了.下图效果弄出来,着实费劲 ...
Cocos Creator 的实现拖尾效果
在游戏中,有时会需要在某个游戏对象上加上移动后的轨迹若隐若现的效果.使得游戏的效果较好,比如游戏大招,刀光,法术,流星划痕之类. Cocos Creator提供了一种内置的拖尾渐隐效果的实现方法:组件 ...
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 ...
纯js实现鼠标拖尾效果（好玩又简单，一学就会）
js特效-鼠标滑动的拖尾效果 <script>//鼠标移动事件(document范围内移动)document.onmousemove=function(event){//1.创建divva ...
游戏中实现鼠标拖尾效果
游戏中使用Trail Renderer这个通过设置参数来实现拖尾效果,通过在update中吧鼠标的点击的路径给怪哉这个得物体. 转载于:https://www.cnblogs.com/qinshuai ...

canvas拖尾效果

canvas拖尾效果相关推荐

最新文章

热门文章