使用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 相关文章推荐
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
JavaScript函数模式详解
Nov 07 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
layui table 多行删除(id获取)的方法
Sep 12 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判断ip黑名单程序代码实例
2014/02/24 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
python新手经常遇到的17个错误分析
2014/07/30 Python
python实现简单购物商城
2016/05/21 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
python中append函数用法讲解
2020/12/11 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
老教师工作总结的自我评价
2013/09/27 职场文书
工会主席岗位责任制
2014/02/11 职场文书
新手上路标语
2014/06/20 职场文书
委托书格式范文
2015/01/28 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
Python 正则模块详情
2021/11/02 Python
排查Tomcat进程假死的问题
2022/05/06 Servers