這篇文章主要介紹了使用electron實(shí)現(xiàn)滿(mǎn)屏愛(ài)心的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

目前創(chuàng)新互聯(lián)已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、綿陽(yáng)服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、京山網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

圖片被壓縮了 看起來(lái)有點(diǎn)難看

主進(jìn)程代碼

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();
    });
}

渲染進(jìn)程代碼

界面代碼

js代碼

 mounted() {
            var hearts = [];
            var canvas = this.$refs.drawHeart;
            var wW = 1920;
            var wH = 1040;
            // 創(chuàng)建畫(huà)布
            var ctx = canvas.getContext('2d');
            // 創(chuàng)建圖片對(duì)象
            var heartImage = new Image();
            heartImage.src = img;
            var num = 100;

            init();

            window.addEventListener('resize', function(){
                wW = window.innerWidth;
                wH = window.innerHeight;
            });
            // 初始化畫(huà)布大小
            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 '愛(ài)你一輩子';
                } 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){
                    // 設(shè)置文字屬性
                    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);
            }

        }

擴(kuò)展功能

全屏展示

const size = screen.getPrimaryDisplay().workAreaSize;   //獲取顯示器的寬高
win.setSet(size.width size.height);
win.setPosition(0,0);

這樣就會(huì)讓窗口全屏 但是有一個(gè)問(wèn)題 就是這樣做界面不會(huì)正確響應(yīng) 我們可以使用進(jìn)程通信去解決

win.webContents.sen('windowSize',size);

之后再主進(jìn)程中監(jiān)聽(tīng)就行了

窗口點(diǎn)擊穿透

以上代碼會(huì)有一個(gè)問(wèn)題 就是一旦運(yùn)行 就不能關(guān)閉了

win.setIgnoreMouseEvents(true) 就可以讓界面只做展示使用 鼠標(biāo)可以點(diǎn)擊你窗口的任意區(qū)域

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享使用electron實(shí)現(xiàn)滿(mǎn)屏愛(ài)心的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!