成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

vue重構(gòu)--H5--canvas實(shí)現(xiàn)粒子時鐘

robin / 694人閱讀

摘要：上一篇文章講解了如何用實(shí)現(xiàn)粒子時鐘，本篇文章，主要是使用重構(gòu)，讓它在也能使用。若有疑問或需要素材，請加群交流

上一篇文章講解了如何用js+canvas實(shí)現(xiàn)粒子時鐘，本篇文章 ，主要是使用vue重構(gòu)，讓它在vue也能使用。

我們使用簡單的方式重構(gòu)，不使用vue工程，先加入vue cdn的地址，如下：



然后，重構(gòu)Clock對象構(gòu)造器，改為將canvas傳入，如下：


function Clock(canvas) {
        this.cxt = canvas.getContext("2d");
        this.cxt.fillStyle="#ffffd";
        this.cxt.fillRect(0, 0, 500, 100);
        this.r = 100/20-1;
    }


然后，創(chuàng)建vue對象實(shí)例，使用生命周期裝載初始化，如下：


var app = new Vue({
  el: "#container",
  data: {
    message: "Hello Vue!"
  },
  mounted() {
    var canvas = document.getElementById("canvas");
        canvas.width = 600;
        canvas.height = 100;
    var clock = new Clock(canvas);
    setInterval(()=>{
        clock.getTime();
    })
  }
})


直接打開頁面就好，若是用vue工程也可以
好了，這樣就ok了。
若有疑問或需要素材，請加群交流：654979292
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/97468.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    H5--canvas實(shí)現(xiàn)粒子時鐘
    
                                                     
    我們先看看粒子時鐘的效果，如下：showImg(https://segmentfault.com/img/remote/1460000016290266);下面我們將通過canvas和js實(shí)現(xiàn)，首先要創(chuàng)建一個html文件并添加一個canvas畫布，如下：



    
    Document
    
        .container{
            margin: 0, aut...
    
                                                   
                          
    
                                
    
                                    avwu
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    canvas 簡易時鐘
    
                                                     
    摘要：簡易版時鐘時鐘清除畫布，每次執(zhí)行重新繪圖，解決時鐘模糊，邊框有鋸齒。

canvas 簡易版時鐘
showImg(https://segmentfault.com/img/bVDNx7?w=405&h=370);


 
  
  
  
  
  
  時鐘
  
        *{
        margin:0;
        padding:0;
    }
    bod...
    
                                                   
                          
    
                                
    
                                    高勝山
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    canvas 簡易時鐘
    
                                                     
    摘要：簡易版時鐘時鐘清除畫布，每次執(zhí)行重新繪圖，解決時鐘模糊，邊框有鋸齒。

canvas 簡易版時鐘
showImg(https://segmentfault.com/img/bVDNx7?w=405&h=370);


 
  
  
  
  
  
  時鐘
  
        *{
        margin:0;
        padding:0;
    }
    bod...
    
                                                   
                          
    
                                
    
                                    sugarmo
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<