Javascript 为什么这个举行活动的鼠标不'；一幅帆布画？

有人能给我一些帮助吗？我不明白为什么它不起作用，我什么都试过了，但我就是不明白，我是初学者

我正在尝试为画布绘制制作一个保持鼠标事件，我尝试创建一个while循环，你按住它，它将在画布中绘制，但它不起作用，所以我尝试让循环在控制台中说“你好”。。。但它不起作用

document.addEventListener("mousedown", holding)
document.addEventListener("mouseup", noHolding)

var hold;

function holding(){
    hold = true;
    console.log("hold: " + hold)
}


function noHolding(){ 
    hold = false;
    console.log("hold: " +  hold)
}


while(hold == true){
    console.log("Holding")
}

---

你必须考虑执行的顺序。 代码逐行执行（或多或少）。因此，在您的示例中，以下是步骤：

声明函数

holding

声明函数

noHolding

声明变量

hold

将按住

键绑定到
mousedown
事件

将

noHolding

绑定到

moueup

事件

定义函数

保持

定义函数

noHolding

循环而

hold==true

• 此时hold的值是未定义的，因此循环不会运行

完成执行

function

和

var

声明被移动（提升）到其函数的顶部，如果不在函数中，则移动（提升）到全局范围

稍后按下鼠标按钮时，

hold

将设置为

true

，但

while（hold==true）

语句已经执行，不会再次运行

您应该避免javascript中运行时间超过几毫秒的循环，因为它们会停止任何其他代码的运行（通常）

您可以改为使用。（包括示例）

来自MDN的示例：

//为true时，移动鼠标在画布上绘制
让isDrawing=false；
设x=0；
设y=0；
const myPics=document.getElementById（'myPics'）；
const context=myPics.getContext（'2d'）；
//画布相对于页面边缘的x和y偏移量
const rect=myPics.getBoundingClientRect（）；
//为mousedown、mousemove和mouseup添加事件侦听器
myPics.addEventListener（'mousedown'，e=>{
x=e.clientX-右左；
y=e.clientY-rect.top；
isDrawing=true；
});
myPics.addEventListener（'mousemove'，e=>{
如果（isDrawing==真）{
抽绳（上下文，x，y，e.clientX-rect.left，e.clientY-rect.top）；
x=e.clientX-右左；
y=e.clientY-rect.top；
}
});
window.addEventListener（'mouseup'，e=>{
如果（isDrawing==真）{
抽绳（上下文，x，y，e.clientX-rect.left，e.clientY-rect.top）；
x=0；
y=0；
isDrawing=false；
}
});
函数绘制线（上下文，x1，y1，x2，y2）{
context.beginPath（）；
context.strokeStyle='black'；
context.lineWidth=1；
上下文。移动到（x1，y1）；
lineTo（x2，y2）；
stroke（）；
closePath（）；
}

画布{
边框：1px纯黑；
宽度：560px；
高度：360px；
}

使用鼠标事件绘制
< /代码>没问题，如果我的回答帮助你考虑接受它，这样它也能帮助别人。