JavaScript實現(xiàn)擦玻璃效果分析鼠標(biāo)移動響應(yīng)時間粒度問題
問題描述：
在實現(xiàn)擦玻璃效果時，需要實現(xiàn)根據(jù)鼠標(biāo)移動進行繪制路徑。開始運用mousemove來實現(xiàn)繪制圓形時，發(fā)現(xiàn)鼠標(biāo)移動速度過快時，繪制的圓形，不能連接一起，中間出現(xià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)移動過快時效果圖：
鼠標(biāo)移動緩慢時效果圖：
經(jīng)過如上代碼分析，發(fā)現(xiàn)當(dāng)鼠標(biāo)移動過快時，console.log("move")執(zhí)行的次數(shù)很少；當(dāng)鼠標(biāo)移動足夠緩慢時，執(zhí)行次數(shù)鼠標(biāo)移動的像素數(shù)近似（這正好驗證了，當(dāng)每移動一個像素時，就會觸發(fā)mousemove事件）。
**原因：**鼠標(biāo)移動時，不會存儲所有的移動信息，而是通過取插值的方法取得鼠標(biāo)位置信息，否則，系統(tǒng)會被鼠標(biāo)移動拖垮。所以就會出現(xiàn)，移動過快時，出現(xiàn)斷點的問題。
解決方案：
繪制移動軌跡時，最常想到的方案就是通過每移動一個像素，就繪制一個圓，讓所有圓連接在一起，正好形成軌跡。（下圖中的圓，就是每移動一個像素，繪制出的圓，連接在一起就是一條軌跡路徑）
理想是美好的，現(xiàn)實是殘酷的。正如上面分析的那樣，mousemove事件的響應(yīng)時間粒度不夠，鼠標(biāo)移動過快時，不能做到移動一個像素，響應(yīng)一次mousemove事件，所以無法通過移動一個像素就繪制一個圓，進而形成連續(xù)軌跡路徑。如下圖所示，移動過快時，路徑會間斷。
我們換種思路，第一次mousemove響應(yīng)時，記錄為起點startPoint，第二次響應(yīng)記錄為終點endPoint，將兩點相連繪制直線，就不會出現(xiàn)中間斷點的情況。 為了美觀，可以利用lineCap屬性，可以保證直線兩端為圓角，如下所示：
ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(20,40); ctx.lineTo(200,40); ctx.stroke();
這樣我們的問題就解決了 演示效果：zhaoshaobang.github.io/blog/lotter…
以上就是JavaScript實現(xiàn)擦玻璃效果分析鼠標(biāo)移動響應(yīng)時間粒度問題的詳細內(nèi)容，更多關(guān)于JavaScript 擦玻璃鼠標(biāo)移動的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
nodejs(nestjs)后端開發(fā)過程中會有一個需要生成圖片驗證碼的功能,其能減少機器人攻擊操作,本文我們通過?svg-captcha,來實現(xiàn)一個驗證碼功能,并且小小的優(yōu)化一下其邏輯,需要的朋友可以參考下2024-06-06
bootstrap datetimepicker控件位置異常的解決方法
這篇文章主要為大家詳細介紹了bootstrap datetimepicker控件位置異常的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
BootStrap自定義popover,點擊區(qū)域隱藏功能的實現(xiàn)
下面小編就為大家分享一篇BootStrap自定義popover,點擊區(qū)域隱藏功能的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了js獲取及判斷鍵盤按鍵的方法,涉及JavaScript鍵盤事件的獲取及鍵值的判定技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
javascript中打印當(dāng)前的時間實現(xiàn)思路及代碼
打印當(dāng)前的時間的方法有很多，在本文為大家詳細介紹下使用javascript是如何做到的，具體實現(xiàn)如下，感興趣的朋友可以參考下2013-12-12
超全面的JavaScript開發(fā)規(guī)范（推薦）
作為一名開發(fā)人員（WEB前端JavaScript開發(fā)），不規(guī)范的開發(fā)不僅使日后代碼維護變的困難，同時也不利于團隊的合作，通常還會帶來代碼安全以及執(zhí)行效率上的問題。本文就主要介紹了關(guān)于Javascript的命名規(guī)范、注釋規(guī)范以及框架開發(fā)的一些問題，需要的朋友可以參考學(xué)習(xí)。2017-01-01
這篇文章主要介紹了如何在JavaScript中正確處理變量，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了Javascript高級技巧,需要的朋友可以參考下2014-02-02
javascript實現(xiàn)網(wǎng)頁端解壓并查看zip文件
昨天給大家分享了在網(wǎng)頁端使用zip.js插件實現(xiàn)在線壓縮文件的代碼，今天給大家分享一下javascript實現(xiàn)網(wǎng)頁端解壓并查看zip文件的方法，非常的實用，有需要的小伙伴可以參考下2015-12-12
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)滾動消息通知，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-02-02