国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

canvas 實(shí)現(xiàn) github404動(dòng)態(tài)效果

pumpkin9 / 424人閱讀

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

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

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

效果圖

文件目錄

文件資源

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

代碼

網(wǎng)頁的body部分

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


    
            您的瀏覽器不支持canvas

js部分

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

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

源項(xiàng)目地址

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112719.html

相關(guān)文章

  • canvas 實(shí)現(xiàn) github404動(dòng)態(tài)效果

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

    impig33 評(píng)論0 收藏0

  • hexo高階教程：next主題優(yōu)化之加入網(wǎng)易云音樂、網(wǎng)易云跟帖、炫酷動(dòng)態(tài)背景、自定義樣式，打造屬于你

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

    weizx 評(píng)論0 收藏0

  • hexo高階教程：next主題優(yōu)化之加入網(wǎng)易云音樂、網(wǎng)易云跟帖、炫酷動(dòng)態(tài)背景、自定義樣式，打造屬于你

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

    SoapEye 評(píng)論0 收藏0

  • hexo高階教程：next主題優(yōu)化之加入網(wǎng)易云音樂、網(wǎng)易云跟帖、炫酷動(dòng)態(tài)背景、自定義樣式，打造屬于你

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

    neuSnail 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

pumpkin9

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<