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 相关文章推荐
表单提交验证类
Jul 14 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
解决vue attr取不到属性值的问题
Sep 18 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
JS动态图片的实现方法完整示例
Jan 13 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
德劲1103二次变频版的打磨
2021/03/02 无线电
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
php依赖注入知识点详解
2019/09/23 PHP
php创建类并调用的实例方法
2019/09/25 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
将python图片转为二进制文本的实例
2019/01/24 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
德国网上花店:Valentins
2018/08/15 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
学校运动会开幕演讲稿
2014/01/04 职场文书
就业协议书怎么填
2014/09/15 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
JavaScript实现简单计时器
2021/06/22 Javascript
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL