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 相关文章推荐
javascript parseInt与Number函数的区别
Jan 21 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 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中使用XML
2006/10/09 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
PHP基本语法实例总结
2016/09/09 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
司机岗位职责
2013/11/15 职场文书
爱的承诺书
2015/01/20 职场文书
高考1977观后感
2015/06/04 职场文书
七一表彰大会简报
2015/07/20 职场文书
Python 制作自动化翻译工具
2021/04/25 Python