欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于JS實(shí)現(xiàn)漫畫中大雨滂沱的效果

 更新時(shí)間:2022年06月13日 08:20:12   作者:肥學(xué)  
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)漫畫中大雨滂沱的效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

演示

技術(shù)棧

最近用canvas有點(diǎn)上癮,接著上次的雨滴和流星雨的思路我們?cè)诟倪M(jìn)一下

<canvas id='canvas' width='1280' height='720'></canvas>

源碼

css部分

body {
margin:0;
padding:0;
background: #000;
overflow:hidden;
}
canvas {
background:url('../img/maxresdefault.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;  
}

background-size屬性指定背景圖片大小。

默認(rèn)值: auto 繼承: no 版本: CSS3 JavaScript 語(yǔ)法: object object.style.backgroundSize="60px 80px"

語(yǔ)法

background-size: length|percentage|cover|contain;

length 設(shè)置背景圖片高度和寬度。第一個(gè)值設(shè)置寬度,第二個(gè)值設(shè)置的高度。如果只給出一個(gè)值,第二個(gè)是設(shè)置為 auto(自動(dòng))

percentage 將計(jì)算相對(duì)于背景定位區(qū)域的百分比。第一個(gè)值設(shè)置寬度,第二個(gè)值設(shè)置的高度。如果只給出一個(gè)值,第二個(gè)是設(shè)置為"auto(自動(dòng))"

cover 此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。

contain 此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。

大雨滂沱

function _pexresize() {
			var cw = window.innerWidth;
			var ch = window.innerHeight;
			if (cw<=ch*stgw/stgh) {
				loffset = 0;
				toffset = Math.floor(ch-(cw*stgh/stgw))/2;
				canvas.style.width = cw + "px";
				canvas.style.height = Math.floor(cw*stgh/stgw) + "px";
			} else {
				loffset = Math.floor(cw-(ch*stgw/stgh))/2;
				toffset = 0;
				canvas.style.height = ch + "px";
				canvas.style.width = Math.floor(ch*stgw/stgh) + "px";
			}
			canvas.style.marginLeft = loffset +"px";
			canvas.style.marginTop = toffset +"px";
		}

隨機(jī)雨點(diǎn)和持續(xù)降雨

for (var l=0;l<lcount;l++) {
			ctx.clearRect(0,0,stgw,stgh);
			for (var i=0;i<count*(lcount-l)/1.5;i++) {
				var myx = Math.floor(Math.random()*stgw);
				var myy = Math.floor(Math.random()*stgh);
				var myh = l*6+8;
				var myw = myh/10;
				ctx.beginPath();
				ctx.moveTo(myx,myy);
				ctx.lineTo(myx+myw,myy+myh);
				ctx.arc(myx, myy+myh, myw, 0, 1 * Math.PI);
				ctx.lineTo(myx-myw,myy+myh);
				ctx.closePath();
				ctx.fill();
			}
			layer[l] = new Image();
			layer[l].src = canvas.toDataURL("image/png");
			layery[l] = 0;
		}



		var stt = 0;
		var str = Date.now()+Math.random()*4000;
		var stact = false;

		function animate() {
			ctx.clearRect(0,0,stgw,stgh);

			for (var l=0;l<lcount;l++) {
				layery[l] += (l+1.5)*5;
				if (layery[l]>stgh) {

					layery[l] =layery[l]-stgh;
				}
				ctx.drawImage(layer[l],0,layery[l]);
				ctx.drawImage(layer[l],0,layery[l]-stgh);
			}
			if (Date.now()>str) {
				stact = true;
			}
			if (stact) {
				stt++;
				if (stt<5+Math.random()*10) {
					var ex = stt/30;
				} else {
					var ex = (stt-10)/30;
				}
				if (stt>20) {
					stt = 0;
					stact = false;
					str = Date.now()+Math.random()*8000+2000;
				}

				ctx.fillStyle = "rgba(255,255,255,"+ex+")";
				ctx.fillRect(0,0,stgw,stgh);
			}
			window.requestAnimationFrame(animate);
		}

到此這篇關(guān)于基于JS實(shí)現(xiàn)漫畫中大雨滂沱的效果的文章就介紹到這了,更多相關(guān)JS大雨滂沱效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • JavaScript中的this關(guān)鍵詞指向

    JavaScript中的this關(guān)鍵詞指向

    本文介紹了JavaScript中的this關(guān)鍵詞指向,this是JavaScript的一個(gè)關(guān)鍵字,他是函數(shù)執(zhí)行過(guò)程中,自動(dòng)生成的一個(gè)內(nèi)部對(duì)象,指當(dāng)前的對(duì)象,只在當(dāng)前函數(shù)內(nèi)部使用,更多相關(guān)資料需要的小伙伴可以參考下面文章內(nèi)容
    2022-05-05
  • Echarts折線圖如何根據(jù)容器寬度自適應(yīng)展示

    Echarts折線圖如何根據(jù)容器寬度自適應(yīng)展示

    我們使用vue做項(xiàng)目的時(shí)候,常常需要做到echarts圖表的自適應(yīng),一般是根據(jù)頁(yè)面的寬度做對(duì)應(yīng)的適應(yīng),下面這篇文章主要給大家介紹了關(guān)于Echarts折線圖如何根據(jù)容器寬度自適應(yīng)展示的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • 通過(guò)js來(lái)制作復(fù)選框的全選和不選效果

    通過(guò)js來(lái)制作復(fù)選框的全選和不選效果

    這篇文章主要介紹的是通過(guò)js來(lái)制作復(fù)選框的全選和不選效果,需要的朋友可以參考下
    2014-05-05
  • js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的五種方法推薦

    js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的五種方法推薦

    下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的五種方法推薦。小編覺(jué)得挺不錯(cuò)的?,F(xiàn)在分享給大家,讓大家參考一下
    2016-03-03
  • 微信小程序?qū)W習(xí)之自定義滾動(dòng)彈窗

    微信小程序?qū)W習(xí)之自定義滾動(dòng)彈窗

    這篇文章主要給大家介紹了關(guān)于微信小程序?qū)W習(xí)之自定義滾動(dòng)彈窗的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • 一個(gè)關(guān)于JS正則匹配的踩坑記錄

    一個(gè)關(guān)于JS正則匹配的踩坑記錄

    這篇文章主要給大家介紹了一個(gè)關(guān)于JS正則匹配的踩坑記錄,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • 最新評(píng)論