根据鼠标X倾斜线

Tilt line according to mouse X

本文关键字：倾斜 鼠标      更新时间：2023-09-26

我正在尝试创建一个页面，其中屏幕中间有一条黑线，当我在 x 轴上移动鼠标时，这条线应该倾斜 - 随着时间的推移，它应该越来越倾斜，直到它最终达到 90 度。

这是我到目前为止的代码，警告javascript有一个while（true）循环，可能会导致浏览器冻结：https://jsfiddle.net/79ggc2hp/

在此处复制粘贴代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XYZ</title>
<style>
body, html {
    height: 100%;
}
</style>
</head>
<body>
<svg height="100%" width="100%">
    <line x1="50%" y1="50%" x2="50%" y2="90%" style="stroke:rgb(0,0,0);stroke-width:10" />
</svg>
<script>
var pressureFactor = 10;
var randomizerCorrection = 0;
var randomizer = 0;
var swingfactor = 1;
var time = 0;
var cursorX;
document.onmousemove = function(e){
    cursorX = e.clientX;
}
while (true) {
    if (randomizerCorrection < randomizer) {
        randomizerCorrection = randomizerCorrection + 0.1;
    }
    if (randomizerCorrection > randomizer) {
        randomizerCorrection = randomizerCorrection - 0.1;
    }
    var Faktor = ((cursorX / 40) - 10) + (this._rotation / pressureFactor);
    this._rotation = this._rotation + Faktor + randomizerCorrection * swingfactor;
    rotationLine = this._rotation;
    if (rotationLine > 90) {
        this._rotation = 90;
    }
    if (rotationLine < (-90)) {
        this._rotation = (-90);
    }
    pressureFactor = pressureFactor - 1;
    if (pressureFactor == 1) {
        pressureFactor = 1;
        swingfactor =+ 1;
    }
    randomizer = Math.random(5) - 2;
    time = time + 1;
}
</script>
</body>
</html>

正如您可能能够看到的那样，事情无法正常工作，但我有点坚持在哪里解决问题 - 因为其中一些是通过谷歌和

rotationLine = this._rotation

应该最终旋转线。

while 循环没有中断条件，因此它将无限运行，并且不会在浏览器中呈现任何内容。您可能误解了代码和呈现的交互方式。当javascript代码完成运行时，浏览器会更新框架并呈现屏幕。但是您的代码永远不会停止运行。把它想象成需要"上来呼吸空气"。我将省略关于在多线程环境中执行此操作的其他方法的讲座，现在只需指出您需要停止代码，让浏览器呈现，然后重新启动代码。

老派的方法是用一个简单的setInterval替换你的while循环：

setInterval(function() {
    if (randomizerCorrection < randomizer) {
        randomizerCorrection = randomizerCorrection + 0.1;
    }
    if (randomizerCorrection > randomizer) {
        randomizerCorrection = randomizerCorrection - 0.1;
    }
    [etc...]
}, 13) // where the second argument is the number of milliseconds between calls.

新的学校方法是使用requestAnimationFrame，但我现在只是玩弄setInterval，直到你习惯了这些概念。

相关文章：