使用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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
javascript URL锚点取值方法
Feb 25 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 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
多重?l件?合查?(一)
2006/10/09 PHP
PHPMailer 中文使用说明小结
2010/01/22 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
JS随机密码生成算法
2019/09/23 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Python笔记之工厂模式
2019/11/20 Python
Python内置异常类型全面汇总
2020/05/28 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
小学国庆节活动方案
2014/02/11 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
租房协议书样本
2014/08/20 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
法制工作总结2015
2015/07/23 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
python批量创建变量并赋值操作
2021/06/03 Python