杭州燎远精品课程网站建设瑞安网站开发

杭州燎远精品课程网站建设,瑞安网站开发,设计平台模式,长沙公司网站建立前言 在Web图形开发中#xff0c;Canvas技术为我们提供了丰富的视觉表现能力。今天#xff0c;我将分享如何使用Pixi.js框架及其滤镜系统#xff0c;实现一个具有随机水波纹和鼠标交互的水波纹特效。本教程基于Pixi.js 7.4.2版本#xff0c;通过实际代码演示如何创建动态的…前言在Web图形开发中Canvas技术为我们提供了丰富的视觉表现能力。今天我将分享如何使用Pixi.js框架及其滤镜系统实现一个具有随机水波纹和鼠标交互的水波纹特效。本教程基于Pixi.js 7.4.2版本通过实际代码演示如何创建动态的视觉体验。实现效果预览随机生成的水波纹扩散效果点击屏幕任意位置触发水波纹多种滤镜叠加的视觉体验一、环境搭建与项目创建# 创建Vite项目npmcreate vitelatest.-- --template vue# 安装Pixi.js 7.4.2版本npminstallpixi.js7.4.2# 安装Pixi滤镜库npminstallpixi-filters5.1.01.2 版本说明Pixi.js 7.4.2这是目前稳定的版本提供了优秀的性能和API支持pixi-filters 5.1.0官方滤镜库包含多种特效滤镜二、完整代码实现下面是一个完整的Vue单文件组件实现注意: 需要删除vite构建项目的基本样式,因为这里将一些全局的样式也写在这里了,所以为了能生效,style标签不能使用scopetemplatedivclasscanvas-container!--Pixi.js画布将通过JavaScript动态添加到此处--/div/templatescript setupimport{onMounted,onUnmounted}fromvue;import*asPIXIfrompixi.js;import{ShockwaveFilter}frompixi-filters;// Pixi应用实例letappnull;onMounted((){initPixiApp();});onUnmounted((){// 清理资源if(app){app.destroy(true);appnull;}});constinitPixiApp(){// 1. 创建Pixi应用appnewPIXI.Application({width:window.innerWidth,height:window.innerHeight,backgroundColor:0x1099bb,// 背景颜色resolution:window.devicePixelRatio||1,// 适配高清屏幕antialias:true,// 开启抗锯齿resizeTo:window,// 自适应窗口大小});// 将Pixi画布添加到DOMdocument.querySelector(.canvas-container).appendChild(app.view);// 2. 创建容器constcontainernewPIXI.Container();app.stage.addChild(container);// 3. 创建背景精灵// 注意你需要准备一张名为tree.jpg的图片放在public/textures目录下consttexturePIXI.Texture.from(/textures/tree.jpg);constspritenewPIXI.Sprite(texture);// 居中并缩放图片sprite.anchor.set(0.5);sprite.scale.set(0.5);sprite.position.set(app.screen.width/2,app.screen.height/2-300);container.addChild(sprite);// 4. 创建文字元素consttextnewPIXI.Text(Hello Tree,{fontFamily:Arial,fontSize:30Math.floor(app.screen.width*0.1),align:center,fill:0xffffff,dropShadow:true,dropShadowColor:#000000,dropShadowBlur:4,dropShadowAngle:Math.PI/2,dropShadowDistance:20});text.anchor.set(0.5);text.position.set(app.screen.width/2,app.screen.height/2);container.addChild(text);// 5. 创建置换滤镜增强波纹效果// 注意需要一张名为replace.png的置换贴图constdisplaceSpritePIXI.Sprite.from(/textures/replace.png);displaceSprite.scale.set(0.1);displaceSprite.texture.baseTexture.wrapModePIXI.WRAP_MODES.REPEAT;// 设置为重复模式constdisplaceFilternewPIXI.DisplacementFilter(displaceSprite);container.addChild(displaceSprite);// 6. 创建多个水波纹滤镜实现复杂效果// 第一个水波纹滤镜主波纹constwaveFilter1newShockwaveFilter([Math.random()*app.screen.width,Math.random()*app.screen.height],{radius:180,// 波纹半径wavelength:30,// 波长amplitude:10,// 振幅strength:100,// 强度speed:500,// 扩散速度waveLength:100,},0);// 第二个水波纹滤镜辅助波纹1constwaveFilter2newShockwaveFilter([Math.random()*app.screen.width,Math.random()*app.screen.height],{radius:40,wavelength:30,amplitude:10,strength:100,speed:200,waveLength:100,},0);// 第三个水波纹滤镜辅助波纹2constwaveFilter3newShockwaveFilter([Math.random()*app.screen.width,Math.random()*app.screen.height],{radius:40,wavelength:30,amplitude:10,strength:100,speed:200,waveLength:100,},0);// 7. 应用所有滤镜container.filters[displaceFilter,waveFilter1,waveFilter2,waveFilter3];// 8. 动画循环app.ticker.add((delta){// 更新置换贴图位置创建流动效果displaceSprite.position.x1;displaceSprite.position.y1;// 更新各个水波纹滤镜updateWaveFilter(waveFilter1,1);updateWaveFilter(waveFilter2,1.5);updateWaveFilter(waveFilter3,2);});// 9. 鼠标点击交互app.view.addEventListener(click,(e){// 点击时重置第一个水波纹的位置和时间waveFilter1.center[e.clientX,e.clientY];waveFilter1.time0;});// 10. 窗口大小调整处理window.addEventListener(resize,(){app.renderer.resize(window.innerWidth,window.innerHeight);sprite.position.set(app.screen.width/2,app.screen.height/2-300);text.position.set(app.screen.width/2,app.screen.height/2);});};// 更新水波纹滤镜的辅助函数functionupdateWaveFilter(filter,resetTime){// 更新时间控制波纹扩散filter.time0.01;// 重置时间并随机位置if(filter.timeresetTime){filter.time0;filter.center[Math.random()*app.screen.width,Math.random()*app.screen.height];}}/scriptstyle.canvas-container{width:100vw;height:100vh;margin:0;padding:0;overflow:hidden;}/* 重置全局样式 */*{margin:0;padding:0;box-sizing:border-box;}body{margin:0;overflow:hidden;}/* 确保Canvas占满屏幕 */canvas{display:block;width:100vw;height:100vh;}/style三、核心代码解析3.1 ShockwaveFilter参数详解constwaveFilternewShockwaveFilter([centerX,centerY// 波纹中心位置],{radius:180,// 波纹最大半径wavelength:30,// 波长控制波纹间距amplitude:10,// 振幅控制波纹高度strength:100,// 强度影响扭曲程度speed:500,// 波纹扩散速度waveLength:100,// 初始波长},0);// 初始时间3.2 随机水波纹实现原理// 通过定时重置滤波器中心位置实现随机波纹functionupdateWaveFilter(filter,resetTime){filter.time0.01;if(filter.timeresetTime){filter.time0;// 随机生成新的波纹中心filter.center[Math.random()*app.screen.width,Math.random()*app.screen.height];}}3.3 鼠标交互实现app.view.addEventListener(click,(e){// 将鼠标点击坐标设置为波纹中心waveFilter1.center[e.clientX,e.clientY];waveFilter1.time0;// 重置时间开始新波纹});总结通过本教程我们学习了Pixi.js基础应用创建初始化、精灵创建、容器管理滤镜系统使用ShockwaveFilter水波纹滤镜和DisplacementFilter置换滤镜动画循环实现使用app.ticker创建动态效果交互功能添加响应鼠标点击事件附件上面使用到了DisplacementFilter置换滤镜,这是需要一张置换滤镜的图片的,在这里附带上了,主要是通过黑白色的图片进行置换.