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的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 用JavaScript绘图 ——JS2D函数集

    /****************** JS2D函数集 ******************* 作者:neweroica 2003-3-28 CopyRight (C) 2003 在引用或转载时请保留此版权信息,谢谢!!! 本函数集可以单独存成一个js文件:"JS2D.js" ***************************************************/ /************* 画点 ************** x,y 点所在的屏幕坐标(像素) col

  • 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

  • js实现两点之间画线的方法

    本文实例讲述了js实现两点之间画线的方法.分享给大家供大家参考.具体分析如下: 最近有点无聊,琢磨了很久,想到了一消磨时间的点子,也就是做js版的连连看. 两点之间画线也只是连连看最基本功能的一部分,所以我画的线也仅是折线,而且还只能向左折,后面将根据连连看中图片位置点来确定折线的方向. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

  • JS实现手写parseInt的方法示例

    前言 本文主要给大家介绍了关于JS实现手写parseInt的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 手写parseInt的实现:要求简单一些,把字符串型的数字转化为真正的数字即可,但不能使用JS原生的字符串转数字的API,比如Number() 示例代码 function _parseInt(str, radix) { let str_type = typeof str; let res = 0; if (str_type !== 'string' &&

  • js实现对table动态添加、删除和更新的方法

    本文实例讲述了js实现对table动态添加.删除和更新的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999

  • js实现对table的增加行和删除行的操作方法

    如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • JS实现对json对象排序并删除id相同项功能示例

    JS实现对json对象排序并删除id相同项功能示例

    本文实例讲述了JS实现对json对象排序并删除id相同项功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net json排序并删除ID相同项</title> </head> <body> <script type="text/javascript&

  • android中实现在ImageView上随意画线涂鸦的方法

    我实现的思路: 1.继承ImageView类 2.重写onTouchEvent方法,在ACTION_MOVE(即移动时),记录下所经过的点坐标,在ACTION_UP时(即手指离开时,这时一条线已经画完),将所画的线(点的集合)保存在一个集合中 3.重写onDraw方法,利用canvas和所记录下的线和点画出线来 可能我讲的十分笼统,下面来看看实际的代码吧 //代表ImageView上的一点 public class ViewPoint { float x; float y; } //表示一条线

  • JS实现随机乱撞彩色圆球特效的方法

    本文实例讲述了JS实现随机乱撞彩色圆球特效的方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS实现的随机乱撞的彩色圆球特效代码</title> <style> body{ font-family: 微软雅黑; } body,h1{ margin

  • JS判断字符串字节数并截取长度的方法

    JS判断字符串字节数并截取长度的方法

    本文实例讲述了JS判断字符串字节数并截取长度的方法.分享给大家供大家参考,具体如下: 这是在项目制作中,积累到的一个东西,感觉效果还可以,现在贴上效果: 那么,在页面上,我们需要检测两个东西,一个就是字节数,一个就是字符数. 由于数据库中,要求title的长度字节数为200,那么具体的js代码如下: /************************************************************************* * CodeBy:SCY CodeDate:20

  • js+html5实现canvas绘制镂空字体文本的方法

    本文实例讲述了js+html5实现canvas绘制镂空字体文本的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not s

随机推荐