首頁 JS特效 html5特效 html5 canvas線條下落動畫特效

html5 canvas線條下落動畫特效

html5 canvas線條下落動畫特效

html5 canvas線條下落動畫特效

html5 canvas線條下落動畫特效是一種跟下雨有點相似的線條下落動畫效果。

(function(){

var c = document.getElementById("c"),
ctx = c.getContext("2d");

c.width = innerWidth;
c.height = innerHeight;

var lines = [],
maxSpeed = 5,
spacing = 5,
xSpacing = 0,
n = innerWidth / spacing,
colors = ["#3B8686", "#79BD9A", "#A8DBA8", "#0B486B"],
i;

for (i = 0; i < n; i++){
xSpacing += spacing;
lines.push({
x: xSpacing,
y: Math.round(Math.random()*c.height),
width: 2,
height: Math.round(Math.random()*(innerHeight/10)),
speed: Math.random()*maxSpeed + 1,
color: colors[Math.floor(Math.random() * colors.length)]
});
}


function draw(){
var i;
ctx.clearRect(0,0,c.width,c.height);

for (i = 0; i < n; i++){
ctx.fillStyle = lines[i].color;
ctx.fillRect(lines[i].x, lines[i].y, lines[i].width, lines[i].height);
lines[i].y += lines[i].speed;

if (lines[i].y > c.height)
lines[i].y = 0 - lines[i].height;
}

requestAnimationFrame(draw);

}

draw();

}());

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn

相關文章

Html5新特性以canvas標籤畫多條直線附效果截圖_html5教學技巧 Html5新特性以canvas標籤畫多條直線附效果截圖_html5教學技巧

16 May 2016

這篇文章主要介紹了Html5新功能用canvas標籤畫多條直線的具體實現,並附效果截圖,有興趣的朋友可以參考下

詳細介紹7款讓人驚豔的HTML5粒子動畫特效詳解 詳細介紹7款讓人驚豔的HTML5粒子動畫特效詳解

06 Mar 2017

HTML5的很大一個優點就是可以更有效率地製作網頁粒子動畫特效,特別是Canvas特性,可以實現在網頁上繪製任何圖形和動畫。本文要分享7款令人驚嘆的HTML5粒子動畫特效,這些粒子特效都提供原始碼下載供大家學習。 1.HTML5 Canvas粒子模擬效果這是一款利用HTML5 Canvas模擬出來的30000個粒子動畫,當你用滑鼠在canvas畫布上移動時,滑鼠周圍的一些粒子就會跟著你移動,並形成一定的圖案,就像你在玩沙畫一樣,效..

基於javascript html5 canvas實現可調式畫筆顏色/粗細/橡皮的塗鴉板 基於javascript html5 canvas實現可調式畫筆顏色/粗細/橡皮的塗鴉板

16 Mar 2017

js html5 canvas實現的塗鴉畫板特效,可調畫筆顏色|粗細|橡皮,可以保存塗鴉效果為圖片編碼,非常適合學習html5的canvas,必須支援html5的瀏覽器才能看到效果。

推薦8篇html5+JavaScript實例教學 推薦8篇html5+JavaScript實例教學

12 Jun 2017

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=utf-8 /&gt;&lt;title&gt;html5 網頁特效 郵箱地址驗證&lt;/title&gt;&ltstyle&lt;title&gt;html5 網頁特效 郵箱地址驗證&lt;/title&gt;&ltstyle&gt;bodybody,;&gt;

支援行動端的HTML5 Canvas逼真黑板特效 支援行動端的HTML5 Canvas逼真黑板特效

19 Jan 2017

這是一款使用HTML5 Canvas製作的黑板特效,該黑板特效支援手機行動端,它能模擬使用粉筆在黑板上寫字的效果。此黑板特效的特點還有:

如何使用HTML5+css3實作粒子效果文字動畫特效(附完整程式碼) 如何使用HTML5+css3實作粒子效果文字動畫特效(附完整程式碼)

25 Sep 2018

我們在瀏覽web網頁的時候會發現現在的網頁做的越來越美觀,很多動畫特效做的越來越酷,這離不開HTML5和css3的深入開發。今天我們要來分享一款以HTML5和css3為基礎的文字特效-粒子效果文字動畫特效。這篇文章帶給大家的內容是關於如何使用HTML5+css3實現粒子效果文字動畫特效,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

酷炫HTML5 SVG文字變形動畫特效 酷炫HTML5 SVG文字變形動畫特效

18 Jan 2017

這是一款使用效果非常酷炫的HTML5 SVG文字變形動畫特效。此特效使用SVG和anime.js,透過SVG描邊動畫來完成各種漂亮的字母動畫特效。

關於css3的詳細介紹 關於css3的詳細介紹

15 Jun 2017

基於HTML5的應用程式現在已經非常廣泛,今天我們就來向大家分享20款非常絢麗的HTML5/CSS3應用程式插件。希望大家喜歡並分享給你的好友們。 1、HTML5影片破碎重組特效 強大視覺衝擊HTML5影片播放器很多,但是HTML5影片特效還是很少見的,這款HTML5影片破碎重組特效非常刺激,給人強大的視覺衝擊。點擊影片任意地方,HTML5將會將這些區域擊碎,過一段時間,這些被擊碎的影片碎片又會自動重新組合...

有關影片破碎重組的文章推薦3篇 有關影片破碎重組的文章推薦3篇

15 Jun 2017

基於HTML5的應用程式現在已經非常廣泛,今天我們就來向大家分享20款非常絢麗的HTML5/CSS3應用程式插件。希望大家喜歡並分享給你的好友們。 1、HTML5影片破碎重組特效 強大視覺衝擊HTML5影片播放器很多,但是HTML5影片特效還是很少見的,這款HTML5影片破碎重組特效非常刺激,給人強大的視覺衝擊。點擊影片任意地方,HTML5將會將這些區域擊碎,過一段時間,這些被擊碎的影片碎片又會自動重新組合...

See all articles See all articles

Hot Tools

HTML5 Canvas愛心飄動動畫特效

HTML5 Canvas愛心飄動動畫特效

HTML5 Canvas愛心飄動動畫特效是一款直接用瀏覽器開啟可以看到一顆心的生成動畫。

H5熊貓彈跳小遊戲原始碼

H5熊貓彈跳小遊戲原始碼

html5手機熊貓也瘋狂小遊戲原始碼。遊戲說明:長按螢幕調整熊貓彈簧的強度,跳到石柱上。掉到河裡遊戲結束。

html5情人節盒子動畫特效

html5情人節盒子動畫特效

基於svg繪製情人節一個個愛心盒子禮物打開動畫,愛心盒子動畫特效。

H5 3D滾球遊戲原始碼

H5 3D滾球遊戲原始碼

html5酷炫3D彩球滾動手機遊戲代碼下載。遊戲介紹:一個彩色圓球滾動,透過滑鼠或手機觸控螢幕拖曳來控制彩球的運行當前線路軌跡。這是一款簡單易操作的手機小遊戲原始碼。