读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. Javascript
  3. 正文

JavaScript中的三角函数应用公式

2020年11月03日 56点热度 0人点赞 0条评论

1、角度和弧度转换

radius = degrees * Math.PI / 180;
degrees = radius *180 / Math.PI

2、图形跟随鼠标转动

dx = mouse.x - obj.x;
dy = mouse.y - obj.y;
obj.rotation = Math.atan2(dy,dx)*180 / Math.PI

3、创建波动

                (function drawFrame() {

                    window.requestAnimationFrame(drawFrame, canvas);
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    ball.x += xspeed;
                    ball.y = centerY / 2 + Math.sin(angle) * range;

                    ball.draw(context)
                }())

4、创建圆形

                 (function drawFrame() {
                     window.requestAnimationFrame(drawFrame, canvas);
                     context.clearRect(0, 0, canvas.width, canvas.height);

                     ball.x = centerX + Math.sin(angle) * radius;
                     ball.y = centerY + Math.cos(angle) * radius;
                     angle += speed;

                     ball.draw(context)
                 }())

5、创建椭圆

                (function drawFrame() {
                    window.requestAnimationFrame(drawFrame, canvas);
                    context.clearRect(0, 0, canvas.width, canvas.height);

                    ball.x = centerX + Math.sin(angle) * radiusX;
                    ball.y = centerY + Math.cos(angle) * radiusY
                    angle += speed
                    ball.draw(context)
                }())

6、两点之间的距离:

dx = x1  -  x2;
dy = y1  -  y2;

dist = Math.sqrt(dx*dx + dy*dy);

正在更新中...

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: canvas JavaScript
最后更新:2020年11月03日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
JavaScript CSS redux 小程序 随笔 Echarts vue mysql node git 阅读 taro react 闲谈 悦读 Nginx hook flutter canvas
推荐文章
  1. React组件传值
  2. 小程序图片压缩
  3. webapp移动端适配配置【rem】
  4. 小程序全局和局部自定义导航栏样式
分类
  • flutter (11)
  • html/css (23)
  • Javascript (23)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (10)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号