使用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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 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
基于文本的搜索
2006/10/09 PHP
用户的详细注册和判断
2006/10/09 PHP
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
python ip正则式
2009/05/07 Python
Python中字符编码简介、方法及使用建议
2015/01/08 Python
21行Python代码实现拼写检查器
2016/01/25 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
高中同学会活动方案
2014/08/14 职场文书
国防教育标语
2014/10/08 职场文书
解除施工合同协议书
2014/10/17 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
MySQL事务的隔离级别详情
2022/07/15 MySQL