前端開發whqet,csdn,王海慶,whqet,前端開發專家
今天是個好日子,2014年5月20日,表白的最佳時機,雖說孩子已經四歲、結婚已經五年,但是也不可以偷懶,于是有了這個。
點這裡,點這裡。程式猿and程式媛,大膽秀出你的愛吧。
利用html5 canvas實作動态的文字粒子效果,效果如下。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiQ3chVEa0V3bT9CX5RXa2Fmcn9CXwczLcVmds92czlGZvwVP9EUTDZ0aRJkSwk0LcxGbpZ2LcBDM08CXlpXazRnbvZ2LcRlMMVDT2EWNvwFdu9mZvwVPRhlW4hmMkZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39DO3UDN1ETMwIDMyUDM0EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
OK,簡單看看原理,首先我們需要在canvas裡面實作描邊文字,然後利用getImageData獲得描邊文字的像素矩陣,将粒子效果綁定在描邊文章上。
整個效果如下。
html檔案非常簡單。
css檔案如下。
js檔案至關重要了。
----------------------------------------------------------
,關注web前端開發,分享相關資源,歡迎點贊,歡迎拍磚。
---------------------------------------------------------------------------------------------------------