JavaScript如何获得两点之间顺时针旋转的角度
接上回:如何用javascript中的canvas让图片自己旋转
既然能够制定角度让图片旋转,那么现在要做的是自动获得旋转的角度,
让图片能够随着鼠标的方向旋转,让人物能够面朝鼠标的方向;
源代码:
- function getAngle(px,py,mx,my){//获得人物中心和鼠标坐标连线,与y轴正半轴之间的夹角
- var x = Math.abs(px-mx);
- var y = Math.abs(py-my);
- var z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
- var cos = y/z;
- var radina = Math.acos(cos);//用反三角函数求弧度
- var angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度
- if(mx>px&&my>py){//鼠标在第四象限
- angle = 180 - angle;
- }
- if(mx==px&&my>py){//鼠标在y轴负方向上
- angle = 180;
- }
- if(mx>px&&my==py){//鼠标在x轴正方向上
- angle = 90;
- }
- if(mx<px&&my>py){//鼠标在第三象限
- angle = 180+angle;
- }
- if(mx<px&&my==py){//鼠标在x轴负方向
- angle = 270;
- }
- if(mx<px&&my<py){//鼠标在第二象限
- angle = 360 - angle;
- }
- return angle;
- }
思路:
(图1)
如图1所示,
我需要知道∠A的角度
其实只需要用三角函数就可以求得
其中比较困难点的是:求得三角函数值,将三角函数转换成弧度,再讲弧度转换为角度:
- var cos = y/z;
- var radina = Math.acos(cos);//用反三角函数求弧度
- var angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度
然而这还没完,这里所求的都是鼠标在第一象限的角度,所以当鼠标在二、三、四象限以及x、y轴上上时要对角度进行调整:
- if(mx>px&&my>py){//鼠标在第四象限
- angle = 180 - angle;
- }
- if(mx==px&&my>py){//鼠标在y轴负方向上
- angle = 180;
- }
- if(mx>px&&my==py){//鼠标在x轴正方向上
- angle = 90;
- }
- if(mx<px&&my>py){//鼠标在第三象限
- angle = 180+angle;
- }
- if(mx<px&&my==py){//鼠标在x轴负方向
- angle = 270;
- }
- if(mx<px&&my<py){//鼠标在第二象限
- angle = 360 - angle;
- }
这样就能获得当前∠A的角度,让人物能够旋转
JavaScript如何获得两点之间顺时针旋转的角度的更多相关文章
- JS如何使用Math.atan2获取两点之间角度的实践案例
本文主要介绍使用如何实现手动拖拽旋转元素的效果. 1.简述 最近在研究如何实现手动控制元素的旋转效果,在网上找了很多,都没有找出类似的实现,因此经过一些调研和计算,最终完美实现效果,在这里记录下来. ...
- (转)c# math 计算两点之间的角度公式
计算两点之间的角度公式是: 假设点一(X1,Y1),点二(X2,Y2) double angleOfLine = Math.Atan2((Y2 - Y1), (X2 - X2)) * 180 / Ma ...
- sql server2008根据经纬度计算两点之间的距离
--通过经纬度计算两点之间的距离 create FUNCTION [dbo].[fnGetDistanceNew] --LatBegin 开始经度 --LngBegin 开始维度 --29.49029 ...
- C#面向对象思想计算两点之间距离
题目为计算两点之间距离. 面向过程的思维方式,两点的横坐标之差,纵坐标之差,平方求和,再开跟,得到两点之间距离. using System; using System.Collections.Gene ...
- 2D和3D空间中计算两点之间的距离
自己在做游戏的忘记了Unity帮我们提供计算两点之间的距离,在百度搜索了下. 原来有一个公式自己就写了一个方法O(∩_∩)O~,到僵尸到达某一个点之后就向另一个奔跑过去 /// <summary ...
- WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信
原文:WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信 最近工作需要,学习了一下winform内嵌webbrowser控件,然后与htm页面中的javasc ...
- Floyd算法——计算图中任意两点之间的最短路径
百度百科定义:传送门 一.floyd算法 说实话这个算法是用来求多源最短路径的算法. 算法原理: 1,从任意一条单边路径开始.所有两点之间的距离是边的权,如果两点之间没有边相连,则权为无穷大. 2,对 ...
- c++ 算法 栅格中两点之间连线
屏幕划线,通过平面坐标系实现,基本组成是一个一个的点,起点为A,终点为B 本文的算法,可以实现平面栅格中,指定的A,B两点之间进行连线(代码中仅打印了两点间需要画出的坐标点) #include < ...
- 求两点之间距离 C++
求两点之间距离(20 分) 定义一个Point类,有两个数据成员:x和y, 分别代表x坐标和y坐标,并有若干成员函数. 定义一个函数Distance(), 用于求两点之间的距离.输入格式: 输入有两行 ...
随机推荐
- 简单实现一个textarea自适应高度
textarea自适应的实现方法很多,原理其实比较简单:监听textarea的input或者键盘事件,获取元素的scrollHeight,重置textarea元素的高度. 预览地址:textarea ...
- OpenCV-----Numpy数组
Nunmpy数组包含: 强大的N维数组对象 复杂的(广播)功能 集成C / C ++和Fortran代码的工具 有用的线性代数,傅立叶变换和随机数功能 遍历与修改数组中的所有像素点 #对所有像素进行循 ...
- highcharts控制X刻度值整数调整
function chartData() { var app_id = $('.app_id').attr('app_id'); var gener_id = $('.gener_id').attr( ...
- vue路由的两种模式配置以及history模式下面后端如何配置
vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变has ...
- CAS实现SSO单点登录
环境 cas-server-4.1.8,cas-client-3.4.0,Java-8,Maven-3,Tomcat-7.0.72 CAS Server 安装 点此进入 CAS 下载列表,选择下载 c ...
- OGG-00303
解决方案:因为Defgen版本不同,注释数据定义文件对应的行 *Database type:ORACLE,用*在行首注释即可
- 使用rabbitctl添加用户
使用rabbitctl添加用户 第一.添加mq用户并设置密码 root@live-mq-01:~ # rabbitmqctl add_user mq 123456 1 root@live-mq-01: ...
- NOIP2015 提高组 Day T3 斗地主
题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共5张牌来进行的扑克牌游戏.在斗地主中,牌的大小关 系根据牌的数码表示如下:3<4< ...
- UI自动化前置代码
一.前置代码: #导入包selenium from selenium import webdriverimport time#创键一个火狐对象driver=webdriver.Firefox()#防问 ...
- namedtuple的简单使用
""" factory function for creating tuple subclasses with named fields namedtuple 是tupl ...