接上回:如何用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如何获得两点之间顺时针旋转的角度的更多相关文章

  1. JS如何使用Math.atan2获取两点之间角度的实践案例

    本文主要介绍使用如何实现手动拖拽旋转元素的效果. 1.简述 最近在研究如何实现手动控制元素的旋转效果,在网上找了很多,都没有找出类似的实现,因此经过一些调研和计算,最终完美实现效果,在这里记录下来. ...

  2. (转)c# math 计算两点之间的角度公式

    计算两点之间的角度公式是: 假设点一(X1,Y1),点二(X2,Y2) double angleOfLine = Math.Atan2((Y2 - Y1), (X2 - X2)) * 180 / Ma ...

  3. sql server2008根据经纬度计算两点之间的距离

    --通过经纬度计算两点之间的距离 create FUNCTION [dbo].[fnGetDistanceNew] --LatBegin 开始经度 --LngBegin 开始维度 --29.49029 ...

  4. C#面向对象思想计算两点之间距离

    题目为计算两点之间距离. 面向过程的思维方式,两点的横坐标之差,纵坐标之差,平方求和,再开跟,得到两点之间距离. using System; using System.Collections.Gene ...

  5. 2D和3D空间中计算两点之间的距离

    自己在做游戏的忘记了Unity帮我们提供计算两点之间的距离,在百度搜索了下. 原来有一个公式自己就写了一个方法O(∩_∩)O~,到僵尸到达某一个点之后就向另一个奔跑过去 /// <summary ...

  6. WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信

    原文:WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信 最近工作需要,学习了一下winform内嵌webbrowser控件,然后与htm页面中的javasc ...

  7. Floyd算法——计算图中任意两点之间的最短路径

    百度百科定义:传送门 一.floyd算法 说实话这个算法是用来求多源最短路径的算法. 算法原理: 1,从任意一条单边路径开始.所有两点之间的距离是边的权,如果两点之间没有边相连,则权为无穷大. 2,对 ...

  8. c++ 算法 栅格中两点之间连线

    屏幕划线,通过平面坐标系实现,基本组成是一个一个的点,起点为A,终点为B 本文的算法,可以实现平面栅格中,指定的A,B两点之间进行连线(代码中仅打印了两点间需要画出的坐标点) #include < ...

  9. 求两点之间距离 C++

    求两点之间距离(20 分) 定义一个Point类,有两个数据成员:x和y, 分别代表x坐标和y坐标,并有若干成员函数. 定义一个函数Distance(), 用于求两点之间的距离.输入格式: 输入有两行 ...

随机推荐

  1. win32 socket编程(二)——TCP/IP

    一.大端.小端法定义 1.1小端法(Little-Endian)就是低位字节排放在内存的低地址端即该值的起始地址,高位字节排放在内存的高地址端. (主机字节顺序) 1.2 大端法(Big-Endian ...

  2. webpack打包过程及开发过程

    1.传统: 1)分模块去定义js.js中要导出将来要被打包的方法module.exports 2)定义main.js入口文件(主文件).在此文件中,导入引用的js文件 var {add} = requ ...

  3. idea 创建java web项目ssm-gradle

    环境准备:jdk1.8+tomcat8+idea+gradle 1.创建项目SSM 使用gradle创建项目,按照提示如下   image.png 输入项目名称,组名   image.png   im ...

  4. Java Split()方法按点(.)切分注意细节

    按点(.)切分,必须要注意转义!如:split("\\."). 例子: public class Test { public static void main(String[] a ...

  5. jQuery学习总结04-文档处理

    1.append(content|fn) 说明:向每个匹配的元素内部追加内容. 这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似. content(要追加到目标中的内 ...

  6. iOS 应用配置及证书生成教程

    简介 首先你需要有一个苹果的开发者帐号,一台苹果电脑.点击查看苹果开发者账号注册流程 本教程需完成应用信息配置,包括如下两个基本配置: AppID Bundle ID 同时,生成 如下三个证书文件及对 ...

  7. c# 读取二进制文件并转换为 16 进制显示

    string result = ""; string filePath = "xxx.bin"; if (File.Exists(filePath)) { by ...

  8. 基于Xilinx Kintex-7 XC7K325T 的FMC USB3.0 SATA 四路光纤数据转发卡

    基于Xilinx Kintex-7 XC7K325T 的FMC USB3.0 SATA 四路光纤数据转发卡 1. 板卡概述 本板卡基于Xilinx公司的FPGAXC7K325T-2FFG900 芯片, ...

  9. 读书笔记一、pandas之series

    转自 # 直接传入一组数据 from pandas import Series, DataFrame obj = Series([4, 2, 3]) obj 0 4 1 2 2 3 dtype: in ...

  10. [APIO2009]抢掠计划(Tarjan,SPFA)

    [APIO2009]抢掠计划 题目描述 Siruseri 城中的道路都是单向的.不同的道路由路口连接.按照法律的规定, 在每个路口都设立了一个 Siruseri 银行的 ATM 取款机.令人奇怪的是, ...