canvas 實現(xiàn) github404動態(tài)效果

impig33 發(fā)布于2019-08-21 17:35 / 2190人閱讀

摘要：使用來完成的動態(tài)效果前幾天使用樣式和致敬了一下的類似界面，同時最近又接觸了，本著瞎折騰的想法便借著之前的的算法，使用來完成了的動態(tài)效果。效果圖文件目錄文件資源文件源碼與圖片在文章末尾給出代碼網(wǎng)頁的部分這里給定義好寬和高設為塊級元素。

使用canvas來完成github404的動態(tài)效果

前幾天使用css樣式和js致敬了一下github404的類似界面，同時最近又接觸了canvas，本著瞎折騰的想法,便借著之前的js的算法，使用canvas來完成了github404的動態(tài)效果。

效果圖

文件目錄

文件資源

文件源碼與圖片在文章末尾給出

代碼

網(wǎng)頁的body部分

這里給canvas 定義好寬和高,設為塊級元素。這些img 標簽是將這些圖片加載出來，我們就不用在js中去加載了，再將圖片設為不顯示 display:none。

js部分

  1.這里我還是新建了一個名為github404的json對象，以對所有的參數(shù)和方法進
  行封裝
  2.再創(chuàng)建imgData的對象，將所有的img所需的參數(shù)傳入
    ps:top和left用于 drawImage() 方法時定位, scale 參數(shù)用于計算鼠標移動
    時對應的圖片移動的計算
  3.init()方法用來初始化，是與外部的接口
  4.畫圖方法的實現(xiàn)就是用 for in 循環(huán)遍歷 imgData[],再依次賦值,
    最后用drawImage()方法繪畫，只是在移動的繪圖方法中，需要注意使用了
    ctx.clearRect() 方法先將畫布清空。

總結

此次使用canvas來完成這個動態(tài)效果，使我更多的了解了canvas的用法。同時使我
對于使用json對象去封裝數(shù)據(jù)和方法，如何組織代碼都有了更深的一些了解。

源項目地址

云服務器 GPU云服務器 github404 html歌詞動態(tài)效果 html加載動態(tài)效果 js免費動態(tài)效果

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

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

canvas 實現(xiàn) github404動態(tài)效果

摘要：使用來完成的動態(tài)效果前幾天使用樣式和致敬了一下的類似界面，同時最近又接觸了，本著瞎折騰的想法便借著之前的的算法，使用來完成了的動態(tài)效果。效果圖文件目錄文件資源文件源碼與圖片在文章末尾給出代碼網(wǎng)頁的部分這里給定義好寬和高設為塊級元素。使用canvas來完成github404的動態(tài)效果前幾天使用css樣式和js致敬了一下github404的類似界面，同時最近又接觸了canvas，本著瞎...

pumpkin9 2019-08-29 13:48 評論0 收藏0
hexo高階教程：next主題優(yōu)化之加入網(wǎng)易云音樂、網(wǎng)易云跟帖、炫酷動態(tài)背景、自定義樣式，打造屬于你

摘要：我選擇的是萬網(wǎng)，阿里下面的。然后在主題配置文件下添加主題配置文件中添加自定義樣式不得不說還是很人性化的，你可以個性化定制你的網(wǎng)站，你所有的改動需要放在主題文件的文件中，會前言本篇文章是在已經(jīng)搭建好gitpage+hexo的博客的前提下（不懂怎么搭建的可以參考我的另一篇博文：了解githubPages+hexo搭建博客的原理或者利用Gitpage+hexo開發(fā)自己的博客，這兩篇博文...

weizx 2019-08-29 12:24 評論0 收藏0
hexo高階教程：next主題優(yōu)化之加入網(wǎng)易云音樂、網(wǎng)易云跟帖、炫酷動態(tài)背景、自定義樣式，打造屬于你

摘要：我選擇的是萬網(wǎng)，阿里下面的。然后在主題配置文件下添加主題配置文件中添加自定義樣式不得不說還是很人性化的，你可以個性化定制你的網(wǎng)站，你所有的改動需要放在主題文件的文件中，會前言本篇文章是在已經(jīng)搭建好gitpage+hexo的博客的前提下（不懂怎么搭建的可以參考我的另一篇博文：了解githubPages+hexo搭建博客的原理或者利用Gitpage+hexo開發(fā)自己的博客，這兩篇博文...

SoapEye 2019-08-20 15:39 評論0 收藏0
hexo高階教程：next主題優(yōu)化之加入網(wǎng)易云音樂、網(wǎng)易云跟帖、炫酷動態(tài)背景、自定義樣式，打造屬于你

摘要：我選擇的是萬網(wǎng)，阿里下面的。然后在主題配置文件下添加主題配置文件中添加自定義樣式不得不說還是很人性化的，你可以個性化定制你的網(wǎng)站，你所有的改動需要放在主題文件的文件中，會前言本篇文章是在已經(jīng)搭建好gitpage+hexo的博客的前提下（不懂怎么搭建的可以參考我的另一篇博文：了解githubPages+hexo搭建博客的原理或者利用Gitpage+hexo開發(fā)自己的博客，這兩篇博文...

neuSnail 2019-08-01 16:37 評論0 收藏0