我这里有这个例子，你可以尝试**（请点击“完整页面”的片段，看看发生了什么），对一些人来说，可能没有问题，在第一次尝试。但请尝试悬停，进出多次。在某些时候，“保存图标”将停止在大尺寸*当我们的鼠标指针是在范围之外。那么，如何解决这个问题呢？第一个
rur96b6h1#
在mousemove事件监听器中调用saveButton.roundRect(...)，这将在Path2D对象中添加一个新的roundRect()，使得每次触发此事件时（即非常频繁）都变得更加复杂。例如，使用一个更简单的rect()命令和SVG表示法，假设在第一次迭代中，您的Path2D包含路径M30,30 H60 V60 H30 Z，在第二次迭代中，它将包含M30,30 H60 V60 H30 Z M30,30 H60 V60 H30 Z，在数千个mousemove事件之后，我让您看到它的样子。操作这样一个复杂的Path2D对象会变得很慢，对它进行命中测试也是如此。去掉那条线你就没事了。
saveButton.roundRect(...)
Path2D
roundRect()
rect()
M30,30 H60 V60 H30 Z
M30,30 H60 V60 H30 Z M30,30 H60 V60 H30 Z
x8diyxa72#
您看到这个问题的原因是您只是在mousemove事件中更新图像。如果鼠标移动得足够快，以至于当光标在路径之外但仍在画布之上时鼠标移动事件没有被触发，那么它将不会再次变小。有几种方法可以解决这个问题，但您可以使用mouseout，这会导致当鼠标在画布上移动以及鼠标离开画布时调用代码。
canvasHudSave.addEventListener('mousemove', mouseEvent); canvasHudSave.addEventListener('mouseout', mouseEvent);
顺便说一句，你可能会发现使用contextHudSave.scale比复制所有的绘图代码更容易，它可以使你的图像更大或更小。
2条答案
按热度按时间rur96b6h1#
在mousemove事件监听器中调用
saveButton.roundRect(...)，这将在Path2D对象中添加一个新的roundRect()，使得每次触发此事件时（即非常频繁）都变得更加复杂。例如，使用一个更简单的
rect()命令和SVG表示法，假设在第一次迭代中，您的Path2D包含路径M30,30 H60 V60 H30 Z，在第二次迭代中，它将包含M30,30 H60 V60 H30 Z M30,30 H60 V60 H30 Z，在数千个mousemove事件之后，我让您看到它的样子。操作这样一个复杂的
Path2D对象会变得很慢，对它进行命中测试也是如此。去掉那条线你就没事了。
x8diyxa72#
您看到这个问题的原因是您只是在mousemove事件中更新图像。如果鼠标移动得足够快，以至于当光标在路径之外但仍在画布之上时鼠标移动事件没有被触发，那么它将不会再次变小。有几种方法可以解决这个问题，但您可以使用mouseout，这会导致当鼠标在画布上移动以及鼠标离开画布时调用代码。
顺便说一句，你可能会发现使用contextHudSave.scale比复制所有的绘图代码更容易，它可以使你的图像更大或更小。