本篇文章给大家带来的内容是关于使用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) 就可以让界面只做展示使用 鼠标可以点击你窗口的任意区域
以上就是使用electron实现满屏爱心的效果（代码示例）的详细内容。