本文是 Felt 博客关于 SVG 迁移到 Canvas 的系列文章的第二部分。在上一篇文章中，我们介绍了如何将 SVG 转换为 Canvas 上的可渲染形状。在本文中，我们将深入探讨如何在 Canvas 上构建交互功能。
跟踪鼠标位置
当用户在 Canvas 上移动鼠标时，我们需要跟踪其位置以便更新交互状态。我们可以设置一个监听器来监控鼠标移动事件，然后将鼠标坐标存储在变量中以供后续使用。
canvas.addEventListener(‘mousemove’, (event) => {
const rect = canvas.getBoundingClientRect()
const x = event.clientX – rect.left
const y = event.clientY – rect.top
// 存储 x 和 y 的值以供后续使用
});
检测点击事件
在 Canvas 上进行交互最常见的方式是检测点击事件。我们可以设置一个监听器来检测 Canvas 上的点击事件，然后根据鼠标位置判断用户是否点击了我们希望他们点击的区域。
canvas.addEventListener(‘click’, (event) => {
const rect = canvas.getBoundingClientRect()
const x = event.clientX – rect.left
const y = event.clientY – rect.top
// 判断用户是否点击了我们希望他们点击的某个元素
});
绘制交互效果
在 SVG 中，我们可以使用 CSS 属性来实现动画效果。在 Canvas 上，我们需要手动计算并绘制元素的每一帧。为了使元素动起来，我们需要绘制每个时间段内元素的位置。这可以通过创建一个函数来实现，在每个时间段内更新元素的位置并重新绘制整个画布。
function animate(time) {
// 更新元素位置
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height)
// 绘制每个元素
// 重复动画
requestAnimationFrame(animate)
}
// 开始动画
requestAnimationFrame(animate)
总结
在本文中，我们学习了如何在 Canvas 上构建交互功能。从跟踪鼠标位置到检测点击事件，再到绘制交互效果，我们了解了从 SVG 迁移到 Canvas 的整个过程。通过学习这些技术，我们可以创建出更加交互和生动的 Web 应用程序。
了解更多有趣的事情：https://blog.ds3783.com/