本文是 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/