当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用electron制作满屏心特效的示例代码

使用electron制作满屏心特效的示例代码

2019年06月01日  | 移动技术网IT编程  | 我要评论

本文介绍了使用electron制作满屏心特效的示例代码，分享给大家，具体如下：


图片被压缩了 看起来很难看

主进程代码

import {browserwindow, app, ipcmain} from 'electron'

createwindow();

ipcmain.on('quitapp', () => {
  app.quit();
});

function createwindow() {

  const loginurl = process.env.node_env === 'development' ? `http://localhost:9080` : `file://${__dirname}/`;
  const win = new browserwindow({

    alwaysontop: true,
    modal: true,
    width: 1200,
    height: 6500,
    frame: false,
    show: false,
    darktheme: true,
    resizable: false,
    minimizable: false,
    maximizable: false,
    transparent: true,
    type: 'toolbar',
    webpreferences: {
      devtools: false,
    }
  });
  win.loadurl(loginurl);
  win.once('ready-to-show', () => {
    win.show();
  });
}

渲染进程代码

界面代码

<template>
  <div style="position: absolute;width: 95%;height: 95%;border-radius: 10px;-webkit-app-region: drag">
    <canvas ref="drawheart" id="drawheart"></canvas>
  </div>
</template>

js代码

 mounted() {
      var hearts = [];
      var canvas = this.$refs.drawheart;
      var ww = 1920;
      var wh = 1040;
      // 创建画布
      var ctx = canvas.getcontext('2d');
      // 创建图片对象
      var heartimage = new image();
      heartimage.src = img;
      var num = 100;

      init();

      window.addeventlistener('resize', function(){
        ww = window.innerwidth;
        wh = window.innerheight;
      });
      // 初始化画布大小
      function init(){
        canvas.width = ww;
        canvas.height = wh;
        for(var i = 0; i < num; i++){
          hearts.push(new heart(i%5));
        }
        requestanimationframe(render);
      }

      function getcolor(){
        var val = math.random() * 10;
        if(val > 0 && val <= 1){
          return '#00f';
        } else if(val > 1 && val <= 2){
          return '#f00';
        } else if(val > 2 && val <= 3){
          return '#0f0';
        } else if(val > 3 && val <= 4){
          return '#368';
        } else if(val > 4 && val <= 5){
          return '#666';
        } else if(val > 5 && val <= 6){
          return '#333';
        } else if(val > 6 && val <= 7){
          return '#f50';
        } else if(val > 7 && val <= 8){
          return '#e96d5b';
        } else if(val > 8 && val <= 9){
          return '#5be9e9';
        } else {
          return '#d41d50';
        }
      }

      function gettext(){
        var val = math.random() * 10;
        if(val > 1 && val <= 3){
          return '爱你一辈子';
        } else if(val > 3 && val <= 5){
          return '感谢你';
        } else if(val > 5 && val <= 8){
          return '喜欢你';
        } else{
          return 'i love you';
        }
      }

      function heart(type){
        this.type = type;
        // 初始化生成范围
        this.x = math.random() * ww;
        this.y = math.random() * wh;

        this.opacity = math.random() * .5 + .5;

        // 偏移量
        this.vel = {
          x: (math.random() - .5) * 5,
          y: (math.random() - .5) * 5
        }

        this.initialw = ww * .5;
        this.initialh = wh * .5;
        // 缩放比例
        this.targetscale = math.random() * .15 + .02; // 最小0.02
        this.scale = math.random() * this.targetscale;

        // 文字位置
        this.fx = math.random() * ww;
        this.fy = math.random() * wh;
        this.fs = math.random() * 10;
        this.text = gettext();

        this.fvel = {
          x: (math.random() - .5) * 5,
          y: (math.random() - .5) * 5,
          f: (math.random() - .5) * 2
        }
      }

      heart.prototype.draw = function(){
        ctx.save();
        ctx.globalalpha = this.opacity;
        ctx.drawimage(heartimage, this.x, this.y, this.width, this.height);
        ctx.scale(this.scale + 1, this.scale + 1);
        if(!this.type){
          // 设置文字属性
          ctx.fillstyle = getcolor();
          ctx.font = 'italic ' + this.fs + 'px sans-serif';
          // 填充字符串
          ctx.filltext(this.text, this.fx, this.fy);
        }
        ctx.restore();
      }
      heart.prototype.update = function(){
        this.x += this.vel.x;
        this.y += this.vel.y;

        if(this.x - this.width > ww || this.x + this.width < 0){
          // 重新初始化位置
          this.scale = 0;
          this.x = math.random() * ww;
          this.y = math.random() * wh;
        }
        if(this.y - this.height > wh || this.y + this.height < 0){
          // 重新初始化位置
          this.scale = 0;
          this.x = math.random() * ww;
          this.y = math.random() * wh;
        }

        // 放大
        this.scale += (this.targetscale - this.scale) * .1;
        this.height = this.scale * this.initialh;
        this.width = this.height * 1.4;

        // -----文字-----
        this.fx += this.fvel.x;
        this.fy += this.fvel.y;
        this.fs += this.fvel.f;

        if(this.fs > 50){
          this.fs = 2;
        }

        if(this.fx - this.fs > ww || this.fx + this.fs < 0){
          // 重新初始化位置
          this.fx = math.random() * ww;
          this.fy = math.random() * wh;
        }
        if(this.fy - this.fs > wh || this.fy + this.fs < 0){
          // 重新初始化位置
          this.fx = math.random() * ww;
          this.fy = math.random() * wh;
        }
      }

      function render(){
        ctx.clearrect(0, 0, ww, wh);
        for(var i = 0; i < hearts.length; i++){
          hearts[i].draw();
          hearts[i].update();
        }
        requestanimationframe(render);
      }

    }

扩展功能

全屏展示

const size = screen.getprimarydisplay().workareasize;  //获取显示器的宽高
win.setset(size.width size.height);
win.setposition(0,0);

这样就会让窗口全屏 但是有一个问题 就是这样做界面不会正确响应 我们可以使用进程通信去解决

win.webcontents.sen('windowsize',size);

之后再主进程中监听就行了

窗口点击穿透

以上代码会有一个问题 就是一旦运行 就不能关闭了

win.setignoremouseevents(true) 就可以让界面只做展示使用 鼠标可以点击你窗口的任意区域

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网