H5-soul星球特效
2024-05-15 05:52:29
目录
一、基于canvas、vue2.0封装的星球特效单文件、数据可通过ifame传参去渲染、点击星球可跳转查看模型
二、效果图
三、部分源码文件、代码
四、兼容PC端、H5端、可嵌入安卓、ios，点赞关注加收藏联系我发源码
一、基于canvas、vue2.0封装的星球特效单文件、数据可通过ifame传参去渲染、点击星球可跳转查看模型
二、效果图
三、部分源码文件、代码
<script type="text/javascript">new Vue({el: '#app',data: {AcademyList: [],AcademyList2: [],Visiable: false,linkData: [],pcStatus: false,mobileStatus: false,Sphere: false,hcylinder: false,vcylinder: false,ifStatus: false,diangliang: null,budiangliang: false,hStatus: true,linkId: "",ifShow: true,isIosStatus: false,},methods: {init: function () {try {TagCanvas.Start('myCanvas', 'tags', {textColour: '#fff',reverse: true,dragControl: true,// padding:1,outlineMethod: 'size',bgOutline: 'tag',interval: 20,depth: 2,wheelZoom: true,textHeight: this.mobileStatus ? 15 : 13,maxSpeed: 0.01,imageVAlign: 'bottom',hideTags: false,imageAlign: 'centre',imageMode: 'both',imagePosition: 'bottom',imageScale: this.pcStatus ? '0.07' : '0.06',initial: [0.05 * Math.random() + 0.05, -(0.02 * Math.random() + 0.02)],imagePadding: 10,// maxBrightness: 1.0,depth: 1,txtOpt: true,shape: 'Sphere',shadow: '#fff',shadowBlur: 30,textAlign: 'centre', //水平对齐文本,可选值centre,left,right。textVAlign: 'middle', //垂直对齐文本,可选值middle,top,bottombgColour: 'tag', //标签的背景颜色,tag是标签本身的背景颜色(即加在tags的标签中的颜色)bgOutline: 'red', //标签轮廓的背景颜色,tag是标签本身的背景颜色(即加在tags的标签中的颜色)shuffleTags: true,// outlineColour:"red",//活动标签周围的框的颜色// outlineThickness:2,//轮廓的粗细(以像素为单位)// outlineOffset:5,//轮廓与文本的距离,以像素为单位// bgRadius:5,//背景圆角的半径(以像素为单位)。// txtScale:1.5,// textFont :'Helvetica, Arial, sans-serif',//标签文本的字体系列// radiusX:1,//云整体倾斜的角度和方向// radiusY:1,//云整体倾斜的角度和方向// radiusZ:1,//云整体倾斜的角度和方向// stretchX:1,//水平拉伸或压缩云。// stretchY:1,//垂直拉伸或压缩云。});} catch (e) {document.getElementById('myCanvasContainer').style.display = 'none';}},handleClick: function (data) {this.linkData = datathis.Visiable = true;this.ifShow = false;document.getElementById('myCanvasContainer').style.display = 'none';document.getElementById('appLoading').style.display = 'block';let timer = setTimeout(()=>{ document.getElementById('appLoading').style.display = 'none';},1000)clearTimeout(timer);},hadleClickDown: function (name) {this.Visiable = false;this.ifStatus = false;this.ifShow = true;document.getElementById('myCanvasContainer').style.display = 'block';document.getElementById('appLoading').style.display = 'block';setTimeout(()=>{ document.getElementById('appLoading').style.display = 'none';},1000)},getQueryVariable: function (variable) {var query = location.search.substring(1);var vars = query.split("&");for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");if (pair[0] === variable) {return pair[1];}}return false;},// 与官网app的交互goToUserHomeIndex: function (id, e) {console.log(id, e);e.preventDefault()let that = this;let form = that.getQueryVariable('form')// 判断iOS 、Androidconst isAndroid = form.indexOf('android') > -1;const isIOS = form.indexOf('ios') > -1console.log(form);// 传递的数据 if (isAndroid) {console.log('android', true);// 'scan'为标志符 app定义// window.WebViewJavascriptBridge.callHandler('scan',);window.goToUserHomeIndex.goToUserHomeIndex(id);}if (isIOS) {// iOS 如果不需要传值 则data要传nullconsole.log('ios', true);window.webkit.messageHandlers.goToUserHomeIndex.postMessage(id);}},},mounted() {var canvas = this.$refs.canvas;canvas.width = document.body.offsetWidth;canvas.height = document.body.offsetHeight;document.getElementById('app').style.display = 'block';document.getElementById('appLoading').style.display = 'none';this.ifShow = false;let timer = setTimeout(() => {document.getElementById('loading').style.display = 'none';document.getElementById('myCanvasContainer').style.display = 'block';this.ifShow = true;}, 4000)let that = this;let form = that.getQueryVariable('form')if (!form) {that.hStatus = false;console.log('不跳转app的回调');} else if (form) {that.isIosStatus = true;}this.AcademyList = list;this.$nextTick(function () {this.init();let self = this;window.addEventListener('message', function (e) {if (e.data == 'hidePageLoading') { // 传参校验self.ifStatus = true;}});});var is_mobile =navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) !=null;if (is_mobile) {// window.location.href = "./index.html#移动端";// location.replace(document.referrer);let canvas = document.getElementById('myCanvas');let ctx = canvas.getContext('2d');let dpr = window.devicePixelRatio; // 假设dpr为2// 获取css的宽高let {width: cssWidth,height: cssHeight} = canvas.getBoundingClientRect();// 根据dpr，扩大canvas画布的像素，使1个canvas像素和1个物理像素相等canvas.width = dpr * cssWidth;canvas.height = dpr * cssHeight;// 由于画布扩大，canvas的坐标系也跟着扩大，如果按照原先的坐标系绘图内容会缩小// 所以需要将绘制比ctx.scale(dpr, dpr);this.mobileStatus = true} else {// window.location.href = "./index.html#pc端";document.getElementById('audios').play()this.pcStatus = true}}})// let music = document.getElementById('audios');// let state = 0;// document: addEventListener('touchstart', function () {// if (state === 0) {// music.play();// state = 1;// }// }, false)// document.addEventListener("WeixinJSBridgeReady", function () {// music.play()// }, false)// /* 循环播放 */// music.onended = function () {// music.play()// music.load()// }document.getElementById('myCanvas').addEventListener('mouseout', function () {TagCanvas.SetSpeed('myCanvas', [0.1, -0.2])})document.getElementById('myCanvas').addEventListener('mouseover', function () {TagCanvas.SetSpeed('myCanvas', [0.0, -0.0])})window.onload = function () {var box = document.getElementById('myCanvas');box.addEventListener('touchstart', function () {console.log('start');TagCanvas.SetSpeed('myCanvas', [0.0, -0.0])})box.addEventListener('touchmove', function () {console.log('move');TagCanvas.SetSpeed('myCanvas', [0.0, -0.0])})box.addEventListener('touchend', function () {console.log('end');TagCanvas.SetSpeed('myCanvas', [0.1, -0.2])})box.addEventListener('touchcancel', function () {console.log('cancel');})}</script>四、兼容PC端、H5端、可嵌入安卓、ios，点赞关注加收藏联系我发源码（麻烦私信我发邮箱哈，整理发源码到你们邮箱哈）
H5-soul星球特效相关推荐
- H5 Canvas下雨特效
模仿下雨的特效,雨点从空中随机飘落. 这个特效使用了H5的新特性Canvas. 效果演示 代码展示 body代码 <!DOCTYPE html> <html lang="e ...
- twitter视频下载php,Twitter推特红心点赞H5动画按钮特效
Twitter推特红心点赞H5动画按钮特效 代码片段: $('body').on("click",'.heart',function() { var A=$(this).attr( ...
- 可以用php做出一个圆锥吗,用H5制作水滴特效教程
给大家带来用H5制作H5制作水滴特效教程,怎么用H5制作特效?H5制作水滴特效的流程,H5制作水滴特效的注意事项有哪些,一起来看一下. 利用canvas 画布制作逼真的水滴特效 /* NOTE: Th ...
- 纯CSS3仿网易云孤独星球特效
独星球特效本身没有什么难点,但如果要加入音轨控制星球运动频率就有点麻烦了,后面我会专门开一篇文章讲解如何使用js去解析mp3的音轨并制作动画特效,这里呢就稍微简单点了,既然是纯CSS3,星球运动频率就 ...
- three.js夜间树林摇曳h5动画js特效
下载地址使用three.js实现的夜间树林摇曳h5动画特效 dd:
- H5炫酷特效系列4——炫酷粒子变化特效
这个示例虽然没有相对比较实用的特性,但是表现出来的效果确实非常震撼眼球.先上效果图,让各位同胞感受一下: 特效的表现感很强,有兴趣的读者可以仔细学习一下下面的代码,尝试着理解其中的逻辑. <!D ...
- CSS3+H5水波扩散特效
水波扩散特效 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- 小程序web-view嵌套H5对AR特效canvas用MediaRecorder录屏踩坑记录
没有iPhone手机,都是找别人测和云真机,但云真机调ar也不方便,微信也难登,真的很难搞. AR场景下,在播放视频或音频前,一般只有一次点击按钮的机会,然后就是一段用户拍摄目标的空窗期,因此必须在用 ...
- H5炫酷特效系列3——瀑布流水特效
这个案例模拟瀑布流水的效果,有点类似喷泉,粒子模拟的水滴会一层一层的下落,很是漂亮. 效果看上去很是炫酷,代码并不是很多,几十行代码搞定,同志们直接复制运行就可以查看效果. <!DOCTYPE ...
最新文章
- 2021年大数据Spark（二十三）：SparkSQL 概述
- 20155308郝文菲--第三次作业
- linux编译项目的命令,Linux用make指令编译进度条程序
- Unity TIP3: 注入现有对象
- java 气泡聊天消息_CSS3 巧妙实现聊天气泡
- python数学建模可视化_数学建模之流程图和数据可视化
- 《计算机科学概论》—第3章3.3节文本表示法
- php定义数据表类,phpwind中的数据库操作类
- 推荐10个最好的Javascript和CSS库
- TortoiseGit使用技巧
- Windows 搭建 .NET 跨平台环境并运行应用程序
- 受损虚拟机的修复方法
- react Link跳转无效_react常见的问题及解决办法
- python控制arduino模拟端口_用Python控制Arduino实现Blink
- 深度学习模型创建dataset
- OpenGL超级宝典（第7版）之第十章计算着色器
- 8个PNG素材网站，每一个都让你觉得人生发亮
- 新萝卜家园 Ghost XP SP3 电脑城装机版 2011.06+
- 125KHz读取ID卡卡号
- 使用GDAL实现DEM的地貌晕渲图(三)