js 实现在2d平面上画8的方法


Posted in Javascript onOctober 10, 2018

效果如下:

js 实现在2d平面上画8的方法

实现这样通过圆画实现这样一个8的形状,首先我们要会画圆。我们可以通过角度转成弧度:

radian = angle/180 * Math.PI;

再通过弧度获取当前的点的位置,这样最基础的圆的位置在-1到1的位置内

var x = Math.sin(radian);
var y = Math.cos(radian);

当画完一个完整的圆以后,另一个圆的x轴绘制和当前的x轴的位置是相同的,但是y轴需要改变,所以,我们就判断一下,是否画完一整个圆(画完一整个8需要720度),如果大于360度,就代表当前正在绘制的是第二个圆,所以,在绘制第二个圆的时候,我们调整一下y的位置,这样就实现的两个圆的绘制:

if(angle%720 > 360){
 y = -y+2;
}

案例代码

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>实现一个点在二维平面上面画8</title>
 <style>
  #canvas{
   display: block;
   margin:0 auto;
  }
 </style>
</head>
<body>
<canvas id="canvas" width="300" height="600"></canvas>
</body>
<script>
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
var angle = 0; //角度
var radian = 0; //弧度
function draw() {
 angle += 2;
 radian = angle/180 * Math.PI;
 var x = Math.sin(radian);
 var y = Math.cos(radian);

 if(angle%720 > 360){
  y = -y+2;
 }

 var left = x*150+150;
 var top = y*150+150;

 ctx.arc(left, top, 1, 0, Math.PI*2);

 ctx.strokeStyle = "green";

 ctx.stroke();

 requestAnimationFrame(draw);
}

requestAnimationFrame(draw);
</script>
</html>

以上这篇js 实现在2d平面上画8的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 查找新建元素代码
Jul 06 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
初识Node.js
Mar 20 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 #Javascript
js正则取值的结果数组调试方法
Oct 10 #Javascript
webpack dll打包重复问题优化的解决
Oct 10 #Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 #Javascript
Koa代理Http请求的示例代码
Oct 10 #Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 #Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 #jQuery
You might like
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
python如何通过protobuf实现rpc
2016/03/06 Python
Unicode和Python的中文处理
2017/03/19 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python request使用方法及问题总结
2020/04/26 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
有关爱国演讲稿
2014/05/07 职场文书
2014年母亲节寄语
2014/05/07 职场文书
公司离职证明样本
2014/09/13 职场文书
英语辞职信怎么写
2015/02/28 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS