由于鼠标与矩形的距离，html5画布使用javascript更改矩形的不透明度

Question

您好，我想在画布上绘制一个矩形，但我希望该矩形的不透明度越高，鼠标越靠近该矩形。我知道它可能非常简单，但我一直在努力让它发挥作用。我目前没有在我的项目中使用任何库，所以最好使用纯 JavaScript。

提前致谢

Answer 1

由于没有提供调整代码，这里是文字大纲：

• 监听 mousemove 事件
• 在 mousemove 事件处理程序中计算鼠标位置
• （在计算时一定要调整画布的偏移量，因为您从事件监听器获得的坐标是相对于网页的，而不是画布本身）
• 使用“距离公式获取鼠标到矩形中心（或矩形边缘）的距离
• 就什么距离数将导致什么矩形不透明度做出设计决策
• 使用 context.clearRect 从画布中清除矩形
• 使用 globalAlpha 设置画布不透明度：将 context.globalAlpha 设置为所需的不透明度。
• 重绘矩形
• 重复，重复，重复！