您現在的位置是:電腦技術吧?>? 故障問題 ??>??水波紋效果,如何做出水波紋的效果??>??正文詳情

水波紋效果,如何做出水波紋的效果

懷信鴻2019-11-16 19:10:37 人圍觀
簡介短發水波紋今天,我們將繼續分享JavaScript實現的效果示例,本文將介紹如何使用JavaScript來實現水波紋的效果。水波效應以圖片為背景。單擊圖片中的任何位置都將水波紋和大波浪的區別

今天,我們繼續分享 JavaScript 實現的效果例子,這篇文章會介紹使用 JavaScript 實現水波紋效果。

水波效果以圖片為背景,點擊圖片任意位置都會觸發。

有時候,我們使用普通的 Javascript 就可以創建一個很有趣的解決功能。

Step 1. HTML 和以前一樣,首先是 HTML 代碼: 代碼如下:!DOCTYPE html html head meta charset=utf-8 / titleWater drops effect/title link rel=stylesheet href=css/main.css type=text/css / script src=js/vector2d.js type=text/javascript charset=utf-8/script script src=js/waterfall.js type=text/javascript charset=utf-8/script /head body div class=example h3a href=#Water drops effect/a/h3 canvas id=waterHTML5 compliant browser required/canvas div id=switcher img onclick='watereff.changePicture(this.src);' src=data_images/underwater1.jpg / img onclick='watereff.changePicture(this.src);' src=data_images/underwater2.jpg / /div div id=fps/div /div /body /html  Step 2. CSS 這是用到的 CSS 代碼:代碼如下:body{background:#eee;margin:0;padding:0} .example{background:#FFF;width:600px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px} #water { width:500px; height:400px; display: block; margin:0px auto; cursor:pointer; } #switcher { text-align:center; overflow:hidden; margin:15px; } #switcher img { width:160px; height:120px; } Step 3. JS 下面是主要的 JavaScript 代碼: 代碼如下:function drop(x, y, damping, shading, refraction, ctx, screenWidth, screenHeight){ this.x = x; this.y = y; this.shading = shading; this.refraction = refraction; this.bufferSize = this.x * this.y; this.damping = damping; this.background = ctx.getImageData(0, 0, screenWidth, screenHeight).data; this.imageData = ctx.getImageData(0, 0, screenWidth, screenHeight); this.buffer1 = []; this.buffer2 = []; for (var i = 0; i this.bufferSize; i ){ this.buffer1.push(0); this.buffer2.push(0); } this.update = function(){ for (var i = this.x 1, x = 1; i this.bufferSize - this.x; i , x ){ if ((x this.x)){ this.buffer2[i] = ((this.buffer1[i - 1] this.buffer1[i 1] this.buffer1[i - this.x] this.buffer1[i this.x]) / 2) - this.buffer2[i]; this.buffer2[i] *= this.damping; } else x = 0; } var temp = this.buffer1; this.buffer1 = this.buffer2; this.buffer2 = temp; } this.draw = function(ctx){ var imageDataArray = this.imageData.data; for (var i = this.x 1, index = (this.x 1) * 4; i this.bufferSize - (1 this.x); i , index = 4){ var xOffset = ~~(this.buffer1[i - 1] - this.buffer1[i 1]); var yOffset = ~~(this.buffer1[i - this.x] - this.buffer1[i this.x]); var shade = xOffset * this.shading; var texture = index (xOffset * this.refraction yOffset * this.refraction * this.x) * 4; imageDataArray[index] = this.background[texture] shade; imageDataArray[index 1] = this.background[texture 1] shade; imageDataArray[index 2] = 50 this.background[texture 2] shade; } ctx.putImageData(this.imageData, 0, 0); } } var fps = 0; var watereff = { // variables timeStep : 20, refractions : 2, shading : 3, damping : 0.99, screenWidth : 500, screenHeight : 400, pond : null, textureImg : null, interval : null, backgroundURL : 'data_images/underwater1.jpg', // initialization init : function() { var canvas = document.getElementById('water'); if (canvas.getContext){ // fps countrt fps = 0; setInterval(function() { document.getElementById('fps').innerHTML = fps / 2 ' FPS'; fps = 0; }, 2000); canvas.onmousedown = function(e) { var mouse = watereff.getMousePosition(e).sub(new vector2d(canvas.offsetLeft, canvas.offsetTop)); watereff.pond.buffer1[mouse.y * watereff.pond.x mouse.x ] = 200; } canvas.onmouseup = function(e) { canvas.onmousemove = null; } canvas.width = this.screenWidth; canvas.height = this.screenHeight; this.textureImg = new Image(256, 256); this.textureImg.src = this.backgroundURL; canvas.getContext('2d').drawImage(this.textureImg, 0, 0); this.pond = new drop( this.screenWidth, this.screenHeight, this.damping, this.shading, this.refractions, canvas.getContext('2d'), this.screenWidth, this.screenHeight ); if (this.interval != null){ clearInterval(this.interval); } this.interval = setInterval(watereff.run, this.timeStep); } }, // change image func changePicture : function(url){ this.backgroundURL = url; this.init(); }, // get mouse position func getMousePosition : function(e){ if (!e){ var e = window.event; } if (e.pageX || e.pageY){ return new vector2d(e.pageX, e.pageY); } else if (e.clientX || e.clientY){ return new vector2d(e.clientX, e.clientY); } }, // loop drawing run : function(){ var ctx = document.getElementById('water').getContext('2d'); watereff.pond.update(); watereff.pond.draw(ctx); fps ; } } window.onload = function(){ watereff.init(); } 正如你所看到的,這里使用 Vector2D 函數,這個函數在 vector2d.js 里提供了。

另一個很難的方法是使用純數學實現,感興趣的可以自己實驗一下。

版權聲明:本文由 懷信鴻 整理編輯。

原標題:怎么做水波紋,水波紋

轉載注明出處:http://www.dn9ww09s.icu/fault/12923.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 小丸工具箱怎么樣,小丸工具箱怎么用

    小丸工具箱怎么樣,小丸工具箱怎么用 相關圖片小丸工具箱慢小藥丸工具箱是一種功能強大、使用方便的視頻壓縮工具,它可以最大程度地保持視頻質量,并能很好地壓縮視頻量,受到許多用戶的青睞。一些用戶仍然不了解小藥丸工...

  • 八萬落地suv哪款好,落地8萬左右的suv哪款好

    八萬落地suv哪款好,落地8萬左右的suv哪款好 相關圖片哪款手機測量工具好用HTML5現在已經成為最流行的標記語言,擁有成熟的社區和廣泛的瀏覽器支持。功能齊全,擴展性強,設計開發人員可以賺錢。更可控的元素,更自由的交互設計,變...

  • htc u12怎么樣,htcu12

    htc u12怎么樣,htcu12 相關圖片htcu12 社區HTC U12是HTC即將發布的旗艦車型。其上一代HTC U11在外觀上是一款非常成功的手機。全新的設計風格和出色的手機體驗挽救了宏達旗艦的聲譽。更有趣的是,索htc u12最新消息...

  • 分分快三玩法技巧集錦,拍照方法技巧集錦

    分分快三玩法技巧集錦,拍照方法技巧集錦 相關圖片拍照的方法與技巧集錦什么是CSS黑客?不同瀏覽器對CSS的解析結果不同,導致同一CSS輸出的頁面效果不同,這就需要csshack來解決瀏覽器的本地兼容性問題。為不同瀏覽器編寫不同C玩快...

  • word設置頁碼,word怎么設置頁碼

    word設置頁碼,word怎么設置頁碼 相關圖片從當前頁開始設置頁碼編輯word文檔時,我們需要在當前文檔中添加一些說明或封面。添加頁碼時,不能將這些頁設置為從頁碼開始的頁。如何從任何頁面設置單詞頁碼?雙擊開始word20...

  • 水墨詩意,水墨詩意的名字

    水墨詩意,水墨詩意的名字 相關圖片水墨古風意境畫北京奧運會開幕式上的詩情畫意的畫卷和它呈現給我們的美麗畫卷,至今仍記憶猶新。今天,我們將用flash制作一個水墨卷軸展開的詩意動畫,主要使用矩形工具和漸變填...

  • 余額寶額度不足什么意思,余額寶贖回額度是什么意思

    余額寶額度不足什么意思,余額寶贖回額度是什么意思 相關圖片余額寶余額額度不足支付寶現在是首選的支付方式之一,轉移到支付寶的錢會自動變成余額寶,不僅可以用于日常消費,還可以用來賺錢,利息比銀行還高。但也有部分用戶發現自己的...

  • 簡單百寶箱,用簡單百寶箱安全嗎

    簡單百寶箱,用簡單百寶箱安全嗎 相關圖片簡單游和簡單百寶箱簡單寶箱是一款老品牌的游戲輔助軟件。該軟件最大的特點是它包含了在線游戲玩家最常用的各種免費助手工具,可以讓玩家快速下載所需的游戲助手。不過,玩家...

  • 姿勢圖解,18種最常用的嘿嘿嘿姿勢

    姿勢圖解,18種最常用的嘿嘿嘿姿勢 相關圖片正確的書寫姿勢這可能是有史以來最值得閱讀和轉發的用戶界面設計自學指南。作者是一個完整的堆棧設計器。在抄襲了大量教程并掌握了PS、AI等軟件后,他發現自己對真正的設計一無...

  • 有妖氣彈幕怎么關,有妖氣關閉彈幕

    有妖氣彈幕怎么關,有妖氣關閉彈幕 相關圖片有妖氣怎么聽配音作為漫畫閱讀的神奇工具,惡魔與一般漫畫閱讀軟件最大的區別在于彈幕功能。但是,有很多小伙伴不想看到攔河壩,那么他們怎么能關閉攔河壩呢?下面,超人軟件...

熱評文章

  • 火螢桌面下載,螢火桌面

    火螢桌面下載,螢火桌面 相關圖片螢火視頻動態桌面很多用戶都喜歡使用火鷹視頻桌面來設置自己的動態壁紙,但有時會遇到火鷹視頻桌面無法使用或火鷹視頻桌面無法正常播放的情況,用戶可以嘗試重置壁紙品牌介紹...

  • Active directory,active

    Active directory,active 相關圖片打印機出現active當前不可用的活動目錄域服務通常在用戶使用打印機時發生。這種情況通常是由打印機服務中的設置引起的。只要你進入服務設置,大部分都可以解決。具體操作方法a...

  • 搖一搖html,搖一搖html5

    搖一搖html,搖一搖html5 相關圖片搖一搖隨機看H5首先,優化devicemotionevent;刪除無用的代碼并按如下方式重新封裝devicemotionevent代碼:if(window)。Devicemotcss3搖一搖晃動...

  • 三星s9指紋失靈,三星s10指紋不靈敏

    三星s9指紋失靈,三星s10指紋不靈敏 相關圖片三星手機怎么截屏隨著vivo x20plus屏幕指紋版的推出,可以說它為全屏幕手機注入了新鮮血液。不過,作為第一批智能手機,三星不會甘心衰落。近日,國外媒體披露,三星已經在研發三...

  • 蔣大鴻地理實例,地理立向秘訣

    蔣大鴻地理實例,地理立向秘訣 相關圖片牽一發而動全身的地理實例HTML5得到的坐標代碼如下:代碼如下:!DOCTYPE HTML htmlhead titletest1。HTML/Title metahttp equiv=地理大全...

  • 網易云鎖屏歌詞,網易云怎么只有鎖屏歌詞

    網易云鎖屏歌詞,網易云怎么只有鎖屏歌詞 相關圖片網易云音樂鎖屏歌詞ios網易云音樂是一款功能豐富的軟件。我相信很多小朋友會用它來練習唱歌。如何打開網易云音樂的鎖屏歌詞?如何關閉網易云音樂的鎖屏?現在,超人軟件將為您...

  • 初學者如何學化妝,計算機初學者入門教程

    初學者如何學化妝,計算機初學者入門教程 相關圖片初學者輪滑視頻教程一般來說,大多數應用程序通過保持HTML的簡單性來解決大多數瀏覽器問題,或者換句話說,通過基于最低的通用特性進行編寫。然而,即便如此,仍然存在字體和布...

  • 怎么加steam好友,steam加不上好友怎么辦

    怎么加steam好友,steam加不上好友怎么辦 相關圖片steam加好友錯誤隨著國外優質的游戲新作不斷涌現,越來越多的國內玩家開始在steam平臺上下載、暢玩游戲。而且你還可以在游戲中和steam上的好友一起進行游戲。很多用戶還不知道怎s...

  • 激萌聊天,激萌為什么不能聊天了

    激萌聊天,激萌為什么不能聊天了 相關圖片激萌不能視頻聊天了嗎不同于一般的美容軟件,用戶可以聊天。那吉夢怎么開始聊天呢?吉夢如何開始視頻聊天?現在,超人軟件編輯將為您介紹它,希望您喜歡!吉夢怎么開始聊天?...

  • css3類似加載,常見加載中css3

    css3類似加載,常見加載中css3 相關圖片css3有哪些優化HTML代碼:代碼如下:UL class=main menuliclass=main menu item activeahref=(home/A/Lili clcss3動畫頁面加載...

關注微信

变脸官网查询