H5-soul星球特效

目录

一、基于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,bottom
              bgColour: '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 = data
          this.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 、Android
          const isAndroid = form.indexOf('android') > -1;
          const isIOS = form.indexOf('ios') > -1
          console.log(form);
          // 传递的数据 
          if (isAndroid) {
            console.log('android', true);
            // 'scan'为标志符 app定义
            // window.WebViewJavascriptBridge.callHandler('scan',);
            window.goToUserHomeIndex.goToUserHomeIndex(id);
          }
          if (isIOS) {
            // iOS 如果不需要传值 则data要传null
            console.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，