• <var id="gzb7d"><strong id="gzb7d"></strong></var>
    <td id="gzb7d"></td>

    1. <acronym id="gzb7d"></acronym>
      瀏覽器部落:-綠色安全純凈官方版!

      運用electron完成滿屏愛心的效果(代碼示例)

      時間:2021-3-25作者:未知來源:瀏覽器部落人氣:

      網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。
      本篇文章給大家帶來的內容是關于使用electron實現滿屏愛心的效果(代碼示例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

      圖片被壓縮了 看起來有點難看

      2345截圖20181127151253.png

      主進程代碼

      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   

      關鍵詞:運用electron完成滿屏愛心的效果(代碼示例)




      Copyright © 2012-2018 瀏覽器部落(http://www.atelierescobar.com) .All Rights Reserved 網站地圖 友情鏈接

      免責聲明:本站資源均來自互聯網收集 如有侵犯到您利益的地方請及時聯系管理刪除,敬請見諒!

      QQ:1006262270   郵箱:kfyvi376850063@126.com   手機版 

      国产乱子伦漫画,猫咪www免费人成在线观看,国产真实哺乳吃奶在线观看,超乳专区爆乳国产