html5 canvas 特效(JavaScript canvas实现流星特效)
类别:编程学习 浏览量:1309
时间:2022-03-29 18:45:18 html5 canvas 特效
JavaScript canvas实现流星特效本文实例为大家分享了JavaScript canvas实现流星特效展示的具体代码,供大家参考,具体内容如下
1、控制透明度变化函数
function easeInQuad(curtime,begin,end,duration){ let x = curtime/duration; //x值 let y = x*x; //y值 return begin+(end-begin)*y; //套入最初的公式 } //用平方根构建的缓慢减速运动 核心函数:x*x + 2*x function 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 } }
2、流星星体光环的闪烁特效
function intervalOpcity (cur=0,start=0.3,end=0.8,dur=3) { if(fadeOpcity(cur,start,end,dur)===end){ cur = 0 let temp = start start = 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) }
3、流星尾巴
function intervalMove (speed,g=0) { if(g===720){ g = 360 } g = g+speed let nextPosition = movePosition (a,g,startPosition) x = nextPosition[0] y = nextPosition[1] clearBgcolor(wrap1) for(let i =1;i<=360;i++){ let g1 = g-i/2 if(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) }
4、完整代码
function easeInQuad(curtime,begin,end,duration){ let x = curtime/duration; //x值 let y = x*x; //y值 return begin+(end-begin)*y; //套入最初的公式 } //用平方根构建的缓慢减速运动 核心函数:x*x + 2*x function 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.body let canvasEl = document.createElement("canvas") canvasEl.width = width canvasEl.height = height canvasEl.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 = 10 let a = -200 let 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/360 let 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+speed let nextPosition = movePosition (a,g,startPosition) x = nextPosition[0] y = nextPosition[1] clearBgcolor(wrap1) for(let i =1;i<=360;i++){ let g1 = g-i/2 if(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 = 0 let temp = start start = 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的好坏(关于canvas绘制模糊问题的解决方法)
- canvas指定区域生成图片(canvas实现图片镜像翻转的2种方式)
- canvas 绘图解决方案(高清屏下canvas重置尺寸引发的问题的解决)
- canvas图片裁剪插件(浅析图片上传及canvas压缩的流程)
- canvas绘制图像文件方法(Canvas多边形绘制的实现方法)
- html5中canvas标签(html5 canvas绘制网络字体的常用方法)
- canvas处理图片风格(html2 canvas生成清晰的图片实现打印功能)
- canvas绘图白屏或者元素有缺失(高清屏中使用Canvas绘图出现模糊的问题及解决方法)
- html5canvas画图有什么用(Html5基于canvas实现电子签名并生成PDF文档)
- 获取canvas画布内容(清除canvas画布内容点擦除+线擦除)
- canvas绘制图形方法(如何使用canvas绘制可移动网格的示例代码)
- canvas动态图(canvas绘制太极图的实现示例)
- canvas图片填充位置(手摸手教你用canvas实现给图片添加平铺水印的实现)
- canvas小程序海报(使用canvas生成含有微信头像的邀请海报没有微信头像问题)
- canvas俄罗斯方块(JavaScript canvas实现俄罗斯方块游戏)
- html5canvas图形怎么打印(HTML5 Canvas 实现K线图的示例代码)
- 爱情可以当饭吃吗(爱情能当饭吃吗)
- Top 3 JSHS《运动与健康科学 英文 》跻身SCI体育学期刊世界前三(Top3JSHS运动与健康科学)
- 体坛传媒LOGO全新升级,多元发展迈出坚实步伐(体坛传媒LOGO全新升级)
- 超撩人治愈的绝美水彩,原来出自她之手 一笔一画令无数人沉醉(超撩人治愈的绝美水彩)
- 新手的勾线(新手的勾线)
- ()
热门推荐
- 小鸟云服务器免流搭建(小鸟云服务器如何进行数据盘挂载?Windows)
- docker gitlab 配置(使用Docker构建一个Git镜像使用clone仓库)
- vue常用的指令和修饰符(Vue中 Vue.prototype使用详解)
- $(document).ready和window.onload的区别
- ASP.NET常用的代码收集
- html5canvas功能介绍(Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 附转换公式)
- webpack打包公共文件(webpack文件打包错误异常)
- mysql高级变量查询(MySQL 使用自定义变量进行查询优化)
- python与php比较(浅谈php调用python文件)
- docker容器和主机端口映射(docker利用单个镜像映射到多个端口操作)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9