canvas实现流星特效

控制透明度变化函数

        function easeInQuad(curtime,begin,end,duration){let x = curtime/duration; //x值let y = x*x; //y值return begin+(end-begin)*y; //套入最初的公式}//用平方根构建的缓慢减速运动  核心函数:x*x + 2*xfunction easeOutQuad(curtime,begin,end,duration){let x = curtime/duration;         //x值let y = -x*x + 2*x;  //y值return begin+(end-begin)*y;        //套入最初的公式}function easeInoutQuad(curtime,begin,end,duration){if(curtime<duration/2){ //前半段时间return easeInQuad(curtime,begin,(begin+end)/2,duration/2);//改变量和时间都除以2}else{let curtime1 = curtime-duration/2; //注意时间要减去前半段时间let begin1 = (begin+end)/2;//初始量要加上前半段已经完成的return easeOutQuad(curtime1,begin1,end,duration/2);//改变量和时间都除以2}}

流星星体光环的闪烁特效

        function intervalOpcity (cur=0,start=0.3,end=0.8,dur=3) {if(fadeOpcity(cur,start,end,dur)===end){cur = 0let temp = startstart = end end = temp}let opcity = fadeOpcity(cur,start,end,dur)let color = `rgba(0,0,0,${opcity})`clearBgcolor(wrap)newParticle (wrap,[x,y],r,color)cur=parseFloat(cur+0.1)setTimeout(()=>{intervalOpcity (cur,start,end,dur)},33)}

流星尾巴

        function intervalMove (speed,g=0) {if(g===720){g = 360}g = g+speedlet nextPosition = movePosition (a,g,startPosition)x = nextPosition[0]y = nextPosition[1]clearBgcolor(wrap1)for(let i =1;i<=360;i++){let g1 = g-i/2if(g1<0&&g<=360){break}let g1Position = movePosition (a,g1,startPosition)newParticle (wrap1,[g1Position[0],g1Position[1]],r/(1+i/5),`rgba(255,200,200,0.5)`)}setTimeout(()=>{intervalMove (speed,g)},33)}

完整代码

function easeInQuad(curtime,begin,end,duration){let x = curtime/duration; //x值let y = x*x; //y值return begin+(end-begin)*y; //套入最初的公式}//用平方根构建的缓慢减速运动  核心函数:x*x + 2*xfunction easeOutQuad(curtime,begin,end,duration){let x = curtime/duration;         //x值let y = -x*x + 2*x;  //y值return begin+(end-begin)*y;        //套入最初的公式}function easeInoutQuad(curtime,begin,end,duration){if(curtime<duration/2){ //前半段时间return easeInQuad(curtime,begin,(begin+end)/2,duration/2);//改变量和时间都除以2}else{let curtime1 = curtime-duration/2; //注意时间要减去前半段时间let begin1 = (begin+end)/2;//初始量要加上前半段已经完成的return easeOutQuad(curtime1,begin1,end,duration/2);//改变量和时间都除以2}}function newCanvas (width,height) {let bodyEl = document.bodylet canvasEl = document.createElement("canvas")canvasEl.width = widthcanvasEl.height = heightcanvasEl.style.position = "absolute"bodyEl.append(canvasEl)let wrap = canvasEl.getContext("2d")return wrap}function setBgcolor (wrap,color) {wrap.fillStyle=color;wrap.fillRect(0,0,wrap.canvas.width,wrap.canvas.height);}function clearBgcolor(wrap){wrap.clearRect(0,0,wrap.canvas.width,wrap.canvas.height)} function newParticle (wrap,position,r,color) {let x = position[0]let y = position[1]wrap.fillStyle=color;wrap.beginPath();wrap.arc(x,y,r,0,2*Math.PI);wrap.shadowBlur=20;wrap.shadowColor=`rgba(255,255,255,0.8)`;wrap.fill();}function fadeOpcity(cur,start,end,dur){let opcity = parseFloat(easeInoutQuad(cur,start,end,dur).toFixed(2)) return opcity}let wrap0 = newCanvas (1000,800)let wrap2 = newCanvas (1000,800)let wrap = newCanvas (1000,800)let wrap1 = newCanvas (1000,800)setBgcolor (wrap0,"black")setBgcolor (wrap,"rgba(0,0,0,0)")setBgcolor (wrap1,"rgba(0,0,0,0)")setBgcolor (wrap2,"rgba(0,0,0,0)")let startPosition = [500,200]let r = 10let a = -200let x =  a*(1-Math.cos(0))*Math.sin(0)+startPosition[0]let y = a*(1-Math.cos(0))*Math.cos(0)+startPosition[1]function movePosition (a,g,startPosition) {let t = Math.PI*2/360let x = a*(1-Math.cos(g*t))*Math.sin(g*t)+startPosition[0]let y = a*(1-Math.cos(g*t))*Math.cos(g*t)+startPosition[1]return [x,y]}function intervalMove (speed,g=0) {if(g===720){g = 360}g = g+speedlet nextPosition = movePosition (a,g,startPosition)x = nextPosition[0]y = nextPosition[1]clearBgcolor(wrap1)for(let i =1;i<=360;i++){let g1 = g-i/2if(g1<0&&g<=360){break}let g1Position = movePosition (a,g1,startPosition)newParticle (wrap1,[g1Position[0],g1Position[1]],r/(1+i/5),`rgba(255,200,200,0.5)`)}setTimeout(()=>{intervalMove (speed,g)},33)}function intervalOpcity (cur=0,start=0.3,end=0.8,dur=3) {if(fadeOpcity(cur,start,end,dur)===end){cur = 0let temp = startstart = end end = temp}let opcity = fadeOpcity(cur,start,end,dur)let color = `rgba(0,0,0,${opcity})`clearBgcolor(wrap)newParticle (wrap,[x,y],r,color)cur=parseFloat(cur+0.1)setTimeout(()=>{intervalOpcity (cur,start,end,dur)},33)}intervalOpcity ()intervalMove (1)

canvas实现流星特效相关推荐

HTML5 canvas生成图片马赛克特效插件
HTML5 canvas生成图片马赛克特效插件简要教程这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...
canvas实现粒子特效
canvas实现粒子特效前言前段时间在学习canvas,实现了一些有趣的功能,最近有时间就把它拿出来分享一下. 成品图思路将这个功能先分析拆解一下: 一张画布上放一个背景图有很多小球在运动 ...
canvas的雨滴特效
canvas的雨滴特效 var canvas = document.querySelector(".rain");//获得类(获得id用#rain)ctx = canvas.get ...
ae制h5文字动画_7款超华丽的HTML5 Canvas文字动画特效
本文作者html5tricks,转载请注明出处文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这时候我们就 ...
html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效
原标题:7款超华丽的HTML5 Canvas文字动画特效文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...
html酷炫电子时钟效果,逼真的HTML5 canvas模拟时钟特效
插件描述:thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效.该时钟特效使用jQuery和HTML5 Canvas API来制作,模拟现实生活中的时钟.并且它还具有定时闹钟的功 ...
前端流星特效_前端工程师流星
前端流星特效 As part of my daily web browsing routine, I follow a number of front-end blogs. I'm always a ...
HTML5的canvas雪花飘落特效
HTML5的canvas雪花飘落特效一.html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
html5实现粒子效果的文字,利用HTML5实现Canvas粒子文字特效
特效描述:利用HTML5实现 Canvas 粒子文字特效.利用HTML5实现Canvas粒子文字特效代码结构 1. HTML代码 change /*jshint esversion:6*/ var ...

canvas实现流星特效

canvas实现流星特效相关推荐

最新文章

热门文章