Canvas 动画: atan2 三角函数与鼠标跟随效果

9145201d6a64c39fc7fc31fbbda6be6c.gif

这个案例展示了如何使用HTML5的Canvas和JavaScript实现一个动态效果:在画布上绘制一个箭头,并让它实时跟随鼠标移动。这个小项目不仅有趣,还能帮助你理解编程和基本数学概念的实际应用。

项目需求

我们的目标是在一个画布上绘制一个箭头,并让这个箭头随着鼠标的移动自动旋转,始终指向鼠标的位置。

数学基础知识:atan2函数

在这个项目中,最关键的数学概念是atan2函数,它帮助我们计算箭头应该如何旋转才能指向鼠标的位置。

  • dxdy:这些是鼠标位置和箭头位置之间的水平和垂直距离。dx是x方向上的差值,dy是y方向上的差值。

  • atan2(dy, dx)是什么?:它是一个特殊的数学函数,用来计算给定的dxdy所对应的角度。这个角度表示从箭头到鼠标的方向。我们之所以使用atan2,是因为它能够处理所有可能的方向(上下左右斜角),并且它比普通的atan函数更为精确和稳定。

cf86be5a275bddc82c067f1ea927dd2b.jpeg

技术要点

让我们来逐步理解项目中涉及的技术要点。

  1. Canvas绘图

  • Canvas是HTML5提供的一个绘图环境。我们使用<canvas>标签来创建一个画布,之后在这个画布上绘制箭头。canvas.getContext('2d')提供了一个2D绘图上下文,通过这个上下文可以绘制图形、设置颜色、处理旋转等操作。

事件监听

  • 我们使用JavaScript的mousemove事件监听器,实时捕捉鼠标在画布上的位置。每次鼠标移动时,事件监听器都会记录鼠标的x和y坐标,这样我们就知道鼠标在哪里了。

图形旋转

  • 当我们知道鼠标的位置后,接下来要做的就是计算箭头应该朝向哪个方向。通过Math.atan2(dy, dx)计算出箭头的旋转角度,然后使用Canvas的rotate方法,让箭头旋转到正确的角度,指向鼠标。

代码展示

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>跟随鼠标移动的箭头</title><style>body {font-family: Arial, sans-serif;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;margin: 0;background-color: #f0f0f0;}canvas {border: 1px solid #000;}header {margin-bottom: 20px;}aside {margin-top: 10px;font-size: 14px;}</style>
</head>
<body><header>Example from <a href="https://qianduandaren.com"><em>前端达人</em></a></header><canvas id="canvas" width="400" height="400"></canvas><aside>请移动鼠标</aside><script>class Utils {static captureMouse(element) {const mouse = { x: 0, y: 0, event: null };element.addEventListener('mousemove', event => {const rect = element.getBoundingClientRect();mouse.x = event.clientX - rect.left;mouse.y = event.clientY - rect.top;mouse.event = event;});return mouse;}}class Arrow {constructor() {this.x = 0;this.y = 0;this.color = "#ffff00";this.rotation = 0;}draw(context) {context.save();context.translate(this.x, this.y);context.rotate(this.rotation);context.lineWidth = 2;context.fillStyle = this.color;context.beginPath();context.moveTo(-50, -25);context.lineTo(0, -25);context.lineTo(0, -50);context.lineTo(50, 0);context.lineTo(0, 50);context.lineTo(0, 25);context.lineTo(-50, 25);context.lineTo(-50, -25);context.closePath();context.fill();context.stroke();context.restore();}}window.onload = () => {const canvas = document.getElementById('canvas');const context = canvas.getContext('2d');const mouse = Utils.captureMouse(canvas);const arrow = new Arrow();arrow.x = canvas.width / 2;arrow.y = canvas.height / 2;const drawFrame = () => {requestAnimationFrame(drawFrame);context.clearRect(0, 0, canvas.width, canvas.height);const dx = mouse.x - arrow.x;const dy = mouse.y - arrow.y;arrow.rotation = Math.atan2(dy, dx);arrow.draw(context);};drawFrame();};</script>
</body>
</html>

分步解释

1. Canvas设置与初始化

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

获取Canvas元素和上下文:首先,在onload函数中,我们通过getElementById获取HTML中的canvas元素,并通过getContext('2d')获取2D绘图上下文,这个上下文是我们用来绘制图形的基础。

2. 工具类Utils:捕捉鼠标位置

class Utils {static captureMouse(element) {const mouse = { x: 0, y: 0, event: null };element.addEventListener('mousemove', event => {const rect = element.getBoundingClientRect();mouse.x = event.clientX - rect.left;mouse.y = event.clientY - rect.top;mouse.event = event;});return mouse;}
}

Utils类简介:

Utils类提供了一个静态方法captureMouse,这个方法的作用是帮助我们实时捕捉鼠标在画布中的位置。

捕捉鼠标位置:

  • getBoundingClientRect():用于获取画布相对于浏览器窗口的位置和大小。

  • 监听mousemove事件:每次鼠标在画布上移动时,都会触发mousemove事件,这时我们计算鼠标相对于画布的x、y坐标,并存储在mouse对象中。

  • 最后返回这个mouse对象,以便我们在后续的代码中随时获取鼠标的位置。

3、定义箭头类Arrow

class Arrow {constructor() {this.x = 0;this.y = 0;this.color = "#ffff00";this.rotation = 0;}draw(context) {context.save();context.translate(this.x, this.y);context.rotate(this.rotation);context.lineWidth = 2;context.fillStyle = this.color;context.beginPath();context.moveTo(-50, -25);context.lineTo(0, -25);context.lineTo(0, -50);context.lineTo(50, 0);context.lineTo(0, 50);context.lineTo(0, 25);context.lineTo(-50, 25);context.lineTo(-50, -25);context.closePath();context.fill();context.stroke();context.restore();}
}
  • Arrow类用于定义箭头的初始属性,包括位置(x、y)、颜色和旋转角度。

  • draw方法:用于在画布上绘制箭头。这个方法使用了Canvas的绘图API,首先保存当前绘图状态(context.save()),然后移动并旋转画布(translate和rotate),根据预定的路径绘制出一个箭头形状,最后填充颜色和描边(fill和stroke),并恢复画布状态(context.restore())。

4.绘制与旋转箭头

const drawFrame = () => {requestAnimationFrame(drawFrame);context.clearRect(0, 0, canvas.width, canvas.height);const dx = mouse.x - arrow.x;const dy = mouse.y - arrow.y;arrow.rotation = Math.atan2(dy, dx);arrow.draw(context);};drawFrame();
  • 动画帧更新:使用requestAnimationFrame(drawFrame)来实现平滑的动画效果。这个方法让浏览器在每次重绘时调用drawFrame,从而以高效的方式不断更新箭头的位置和方向。

  • 清除画布:每一帧开始时,我们使用context.clearRect(0, 0, canvas.width, canvas.height)清空画布,这样就不会看到之前绘制的内容残留。这样做可以确保每次重绘都是干净的。

  • 计算方向

    • dxdy:计算鼠标相对于箭头的水平和垂直距离。

    • 旋转角度:通过Math.atan2(dy, dx)计算出箭头需要旋转的角度。atan2函数根据这两个差值返回一个介于π之间的角度值,表示从箭头位置到鼠标位置的方向。

  • 绘制箭头:在计算完旋转角度后,我们调用arrow.draw(context),根据新的角度在画布上绘制箭头。这使得箭头能够实时指向鼠标的位置。

结束

这个项目演示了如何使用HTML5的Canvas和JavaScript来创建一个动态的跟随鼠标移动的箭头效果。我们通过atan2函数计算出箭头旋转的角度,并使用Canvas的绘图功能将其实时显示在网页上。通过这个案例,您不仅学会了如何使用Canvas绘图和JavaScript事件监听,还掌握了如何将数学函数应用于实际的编程问题中。

希望这个案例能帮助您更好地理解这些技术,并激发您进一步学习和探索的兴趣!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/408354.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java二十三种设计模式-解释器模式(23/23)

本文深入探讨了解释器模式&#xff0c;这是一种行为设计模式&#xff0c;用于构建和解释执行自定义语言&#xff0c;提供了实现方法、优点、缺点、与其他模式的比较、最佳实践和替代方案的全面分析&#xff0c;帮助开发者在实际应用中做出明智的设计选择。 解释器模式&#xff…

趣味算法------尾部零的个数(C语言,python双重解法)

目录 题目描述&#xff1a; 解题思路&#xff1a; 具体代码&#xff1a; 注意&#xff1a; 题目描述&#xff1a; 给出数字 n(0<n<1000000)&#xff0c;计算出 n 阶乘尾部零的个数。 输入输出格式 输入格式 一个整数。 输出格式 一个整数。 输入输出样例 输入 11 输…

pytorch基础学习

环境安装 mac安装conda&#xff08;为什么安装conda? conda类似沙箱&#xff0c;将一个一个环境隔离起来&#xff0c;解决Python工程之前的包冲突问题&#xff09; 下载Miniconda安装器:https://docs.conda.io/en/latest/miniconda.html 执行dmg安装。 安装完成后&#xff0c…

【数据结构5】二叉搜索树(插入、查询、删除)

1 二叉搜索树 1.1 二叉搜索树-插入 1.2 二叉搜索树-查询 1.3 二叉搜索树-删除 1 二叉搜索树 二叉搜索树是一颗二叉树且满足性质:设是二叉树的一个节点。 如果y是x左子树的一个节点&#xff0c;那么y.key< x.key;如果y是x右子树的一个节点&#xff0c;那么y.key > x.key。…

绘剪批量软件——绘剪批量软件

批量软件是一种可以批量处理大量数据或操作的软件。它通常通过自动化的方式&#xff0c;快速高效地完成任务&#xff0c;减少人工操作的时间和工作量。批量软件可以用于数据处理、文件转换、批量重命名、批量下载等各种场景。 绘剪批量软件——绘剪TK批量软件 AIWYZ77 批量软…

docker容器数据卷、数据卷基本案例

在docker里面创建也会在主机中生成文件 并且docker停止 时在主机中创建文件仍然可以生成在docker中

机器学习入门指南:如何构建智能预测模型

【机器学习】&#xff1a;入门从零开始的指南 随着人工智能的快速发展&#xff0c;机器学习&#xff08;Machine Learning&#xff09;已经成为技术领域的热点话题。无论是推荐系统、语音识别、自动驾驶汽车&#xff0c;还是自然语言处理&#xff0c;机器学习的应用随处可见。…

动态规划-打家劫舍Ⅱ

该题是打家劫舍Ⅰ的升级版并与其相关&#xff0c;如果对其感兴趣的话可以先看看打家劫舍Ⅰ 题目描述 一个专业的小偷&#xff0c;计划偷窃一个环形街道上沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都围成一圈 &#xff0c;这意味着第一个房屋和最后…

如何在IIS中为typecho博客启用HTTPS访问

在上篇文章中&#xff0c;介绍了如何安装typecho博客系统&#xff0c;默认是没有启用https访问的&#xff0c;这篇文章介绍如何 在IIS中开启 https访问。 开启https访问需要两个步骤&#xff1a; 1、申请 一个ssl证书&#xff0c;我这里以阿里云上面的申请流程为例。其它云服务…

Variomes:支持基因组变异筛选的高召回率搜索引擎

《Bioinformatics》2022 Variomes&#xff1a; https://candy.hesge.ch/Variomes Source code&#xff1a; https://github.com/variomes/sibtm-variomes SynVar&#xff1a; https://goldorak.hesge.ch/synvar 文章摘要&#xff08;Abstract&#xff09; 动机&#xff08;Mot…

前端宝典十:webpack性能优化最佳实践

Webpack 内置了很多功能。 通常你可用如下经验去判断如何配置 Webpack&#xff1a; 想让源文件加入到构建流程中去被 Webpack 控制&#xff0c;配置 entry&#xff1b;想自定义输出文件的位置和名称&#xff0c;配置 output&#xff1b;想自定义寻找依赖模块时的策略&#xff…

C++笔记---内存管理

1. 内存分布 在对操作系统有更加深入的了解之前&#xff0c;在写代码的层面我们需要对下面的几个内存区域有所了解&#xff1a; 1. 栈又叫堆栈--非静态局部变量/函数参数/返回值等等&#xff0c;栈是向下增长的。 2. 堆--用于程序运行时动态内存分配&#xff0c;堆是可以上增长…

猫头虎分享:Python库 Httpx 的简介、安装、用法详解入门教程

猫头虎分享&#xff1a;Python库 Httpx 的简介、安装、用法详解入门教程&#x1f405; 大家好&#xff01;今天猫头虎来为大家分享一个在 Python 开发中非常实用的库——Httpx。 最近有很多粉丝问猫哥&#xff0c;Httpx 是什么&#xff1f;如何安装和使用&#xff1f;今天猫头…

深入解析SSRF和Redis未授权访问

深入解析SSRF和Redis未授权访问&#xff1a;漏洞分析与防御 在网络安全领域&#xff0c;服务器端请求伪造&#xff08;SSRF&#xff09; 和 Redis未授权访问 是两类常见且危险的安全漏洞。 1.2 SSRF攻击的利用 1.2.1 测试并确认SSRF漏洞 一个典型的例子是&#xff0c;当应用…

Java入门:06.Java中的方法--进阶04

4方法递归 简而言之就是方法的自身调用。 也可以是方法组自身的调用 递归类似循环&#xff0c;可以实现功能的反复执行。在某些(算法)环境下&#xff0c;比使用循环更轻松。 递归的本质就是方法的不同调用&#xff0c;就会不同的产生栈帧压栈&#xff0c;栈空间有限&#xff…

如何优雅的实现CRUD,包含微信小程序,API,HTML的表单(一)

前言 在开发实际项目中&#xff0c;其实CRUD的代码量并不小&#xff0c;最近要做一个小程序项目&#xff0c;由于涉及表单的东西比较多&#xff0c;就萌生了一个想法&#xff0c;小程序的写法不是和VUE类似&#xff0c;就是数据绑定&#xff0c;模块么&#xff01;那就来一个动…

redis核心数据结构源码分析

dictEntry和redisObject 在 Redis 的实现中&#xff0c;当一个键值对被创建并存储时&#xff0c;键通常是一个字符串&#xff0c;而值则是一个 redisObject。因此&#xff0c;在 dictEntry 结构中&#xff0c;key 成员指向的是一个字符串&#xff0c;而 v.val 成员则指向一个 …

IO进程day01(函数接口fopen、fclose、fgetc、fputc、fgets、fputs)

目录 函数接口 1》打开文件fopen 2》关闭文件fclose 3》文件读写操作 1> 每次读写一个字符&#xff1a;fgetc(),fputc() 针对文件读写 针对终端读写 练习&#xff1a;实现 cat 命令功能 格式&#xff1a;cat 文件名 2> 每次一个字符串的读写 fgets() 和 fputs() …

云原生系列 - Nginx(高级篇)

前言 学习视频&#xff1a;尚硅谷Nginx教程&#xff08;亿级流量nginx架构设计&#xff09;本内容仅用于个人学习笔记&#xff0c;如有侵扰&#xff0c;联系删学习文档&#xff1a; 云原生系列 - Nginx(基础篇)云原生系列 - Nginx(高级篇) 一、扩容 通过扩容提升整体吞吐量…

【非常简单】 猿人学web第一届 第12题 入门级js

这一题非常简单&#xff0c;只需要找到数据接口&#xff0c;请求参数 m生成的逻辑即可 查看数据接口 https://match.yuanrenxue.cn/api/match/12 查看请求对应的堆栈中的 requests 栈 list 为对应的请求参数 list 是由 btoa 函数传入 ‘yuanrenxue’ 对应的页码生成的 bto…