JavaScript實(shí)現(xiàn)擦玻璃效果分析鼠標(biāo)移動(dòng)響應(yīng)時(shí)間粒度問題

更新時(shí)間：2022年10月15日 08:50:58 作者：青天訣

這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)擦玻璃效果分析鼠標(biāo)移動(dòng)響應(yīng)時(shí)間粒度問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

問題描述：

在實(shí)現(xiàn)擦玻璃效果時(shí)，需要實(shí)現(xiàn)根據(jù)鼠標(biāo)移動(dòng)進(jìn)行繪制路徑。開始運(yùn)用mousemove來實(shí)現(xiàn)繪制圓形時(shí)，發(fā)現(xiàn)鼠標(biāo)移動(dòng)速度過快時(shí)，繪制的圓形，不能連接一起，中間出現(xiàn)斷點(diǎn)，無法形成一條完整的路徑。

問題分析：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#content{
			width: 200px;
			height: 200px;
			border: 1px solid #ccc;
			background-color: blue;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div id="content"></div>
	<script type="text/javascript">
		var box=document.getElementById("content");
		var isMouseDown=false;
		var t=0;
		box.addEventListener("mousemove",function(e){
			if(isMouseDown){
				console.log("move");	
				/*t++;
				console.log(t);*/
			}
		});
		box.addEventListener("mousedown",function(e){
			isMouseDown=true;
		});
		document.addEventListener("mouseup",function(e){
			isMouseDown=false;
		});
	</script>
</body>
</html>

鼠標(biāo)移動(dòng)過快時(shí)效果圖：

鼠標(biāo)移動(dòng)緩慢時(shí)效果圖：

經(jīng)過如上代碼分析，發(fā)現(xiàn)當(dāng)鼠標(biāo)移動(dòng)過快時(shí)，console.log("move")執(zhí)行的次數(shù)很少；當(dāng)鼠標(biāo)移動(dòng)足夠緩慢時(shí)，執(zhí)行次數(shù)鼠標(biāo)移動(dòng)的像素?cái)?shù)近似（這正好驗(yàn)證了，當(dāng)每移動(dòng)一個(gè)像素時(shí)，就會觸發(fā)mousemove事件）。

**原因：**鼠標(biāo)移動(dòng)時(shí)，不會存儲所有的移動(dòng)信息，而是通過取插值的方法取得鼠標(biāo)位置信息，否則，系統(tǒng)會被鼠標(biāo)移動(dòng)拖垮。所以就會出現(xiàn)，移動(dòng)過快時(shí)，出現(xiàn)斷點(diǎn)的問題。

解決方案：

繪制移動(dòng)軌跡時(shí)，最常想到的方案就是通過每移動(dòng)一個(gè)像素，就繪制一個(gè)圓，讓所有圓連接在一起，正好形成軌跡。（下圖中的圓，就是每移動(dòng)一個(gè)像素，繪制出的圓，連接在一起就是一條軌跡路徑）

理想是美好的，現(xiàn)實(shí)是殘酷的。正如上面分析的那樣，mousemove事件的響應(yīng)時(shí)間粒度不夠，鼠標(biāo)移動(dòng)過快時(shí)，不能做到移動(dòng)一個(gè)像素，響應(yīng)一次mousemove事件，所以無法通過移動(dòng)一個(gè)像素就繪制一個(gè)圓，進(jìn)而形成連續(xù)軌跡路徑。如下圖所示，移動(dòng)過快時(shí)，路徑會間斷。

我們換種思路，第一次mousemove響應(yīng)時(shí)，記錄為起點(diǎn)startPoint，第二次響應(yīng)記錄為終點(diǎn)endPoint，將兩點(diǎn)相連繪制直線，就不會出現(xiàn)中間斷點(diǎn)的情況。為了美觀，可以利用lineCap屬性，可以保證直線兩端為圓角，如下所示：

ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,40);
ctx.lineTo(200,40);
ctx.stroke();

這樣我們的問題就解決了演示效果：zhaoshaobang.github.io/blog/lotter…

以上就是JavaScript實(shí)現(xiàn)擦玻璃效果分析鼠標(biāo)移動(dòng)響應(yīng)時(shí)間粒度問題的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 擦玻璃鼠標(biāo)移動(dòng)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: