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


Posted in Javascript onNovember 27, 2018

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

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

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

使用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}/index.html`;
  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) 就可以让界面只做展示使用 鼠标可以点击你窗口的任意区域

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
vue-dialog的弹出层组件
May 25 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 #Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 #Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 #Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 #Javascript
详解vuex 渐进式教程实例代码
Nov 27 #Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 #Javascript
Node+OCR实现图像文字识别功能
Nov 26 #Javascript
You might like
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
python实现SOM算法
2018/02/23 Python
在双python下设置python3为默认的方法
2018/10/31 Python
python爬虫 requests-html的使用
2020/11/30 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
DNA测试:Orig3n
2019/03/01 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
优秀教导主任事迹材料
2014/05/09 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
出国留学导师推荐信
2015/03/26 职场文书
优秀大学生自荐信
2015/03/26 职场文书
白银帝国观后感
2015/06/17 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
python 多态 协议 鸭子类型详解
2021/11/27 Python