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 相关文章推荐
基于node.js的快速开发透明代理
Dec 25 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
JavaScript制作简单的框选图表
May 15 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
webpack多入口多出口的实现方法
Aug 17 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 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下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
Python中list初始化方法示例
2016/09/18 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
合同意向书范本
2014/07/30 职场文书
门面房租房协议书
2014/08/20 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书