~~聖誕節到啦, canvas雪花效果, 漂亮到簡直沒天理啊~~


   看到coding的主界面有雪花, 原來,哇,  真漂亮, 一看源代碼, 哦了個去, angular寫的, 壓力好大, 分析分析分析分析....

   然后就寫成jQ插件的樣子給大家用了。

   在線預覽的頁面是: http://1.keepu.sinaapp.com/snow/snow.html

   Github的代碼地址是: http://sqqihao.github.io/nice-Snowing ;

  上圖了

  后面把angular拿掉了,直接引用jQuery就好了,其實不用jQuery也行的哇, 兼容沒弄哇;

  HTML的代碼就是canvas就好了,如下

 

<canvas class="snow-canvas" speed="1" interaction="false" size="2" count="80" opacity="0.00001" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" wind-power="0" image="false" width="1366" height="667"></canvas>

<canvas class="snow-canvas" speed="3" interaction="true" size="6" count="30" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" opacity="0.00001" wind-power="2" image="false" width="1366" height="667"></canvas>

<canvas class="snow-canvas" speed="3" interaction="true" size="12" count="20" wind-power="-5" image="snow.png" width="1366" height="667"></canvas>

 

  所有的配置都是在canvas節點上面的, 看節點屬性的名字就知道是神馬意思了,

  比如:

    添加image這個屬性是圖片地址, 讓雪花自定義成喜歡的樣子;

    size表示的是圖片的大小
    count表示圖片的個數..等等;

  直接戳實例地址:打開demo;
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM