JavaScript 动态三角函数实例详解


Posted in Javascript onJanuary 08, 2017

下面一段代码给大家分享JavaScript 动态三角函数,具体代码如下所述:

<html>
 <head>
 <meta charset="utf8" />
 <title>三角函数图形</title>
 <style type="text/css">
  body {
  background-color:black;
  }
  #canvas {
  position:absolute;
  top:50%;
  left:50%;
  margin:-151px 0 0 -401px;
  border:1px dashed #171717;
  }
 </style>
 </head>
 <body>
 <canvas id="canvas" width="800px" height="300px">您的浏览器不支持canvas</canvas>
 <script type="text/javascript">
  //判断是否支持canvaas
  function isSupportCanvas(canvas) {
  return !!(canvas.getContext && canvas.getContext("2d"));
  }
  //requestAnimationFrame会自动使用最优的帧率进行渲染
  function setupRAF() {
  var lastTime = 0;
  //兼容各个浏览器,Internet Explorer11、Google Chrome(Microsoft Edge)、Mozilla Firefox、Opera
  var vendors = ["ms", "moz", "webkit", "o"];
  for(var i=0; i<vendors.length; i++) {
   window.requestAnimationFrame = window[vendors[i] + "RequestAnimationFrame"];
   window.cancelAnimationFrame = window[vendors[i] + "CancelAnimationFrame"] || window[vendors[i] + "CancelRequestAnimationFrame"];
   //测试浏览器支持哪一张
   if(window.requestAnimationFrame) {
   console.log(vendors[i] + "requestAnimationFrame");
   }
   if(window[vendors[i] + "CancelAnimationFrame"]) {
   console.log(vendors[i] + "CancelAnimationFrame");
   }
   if(window[vendors[i] + "CancelRequestAnimationFrame"]) {
   console.log(vendors[i] + "CancelRequestAnimationFrame");
   }
  }
  //回退机制
  if(!window.requestAnimationFrame) {
   window.requestAnimationFrame = function(callback, element) {
   var currentTime = new Date().getTime();
   var timeToCall = Math.max(0, 16-(currentTime-lastTime));
   var callTime = currentTime + timeToCall;
   var id = window.setTimeout(function() {
    callback(callTime);
   }, timeToCall);
   lastTime = callTime;
   return id;
   };
  }
  //回退机制
  if(!window.cancelAnimationFrame) {
   window.cancelAnimationFrame = function(id) {
   clearTimeout(id);
   }
  }
  }
  var CanvasController = function(canvas) {
  var ctx = canvas.getContext("2d");
  ctx.lineWidth = 1;
  ctx.textAlign = "left";
  ctx.textBaseline = "middle";
  ctx.font = "bold 18pt Calibri";
  var i = 0;
  var step = 1;
  var unitX = 90
  var unitY = canvas.height * 0.3;
  function update() {
   i += step;
   i %= 360;
  }
  //渲染坐标
  function rendeRcoordinate() {
   ctx.strokeStyle = "white";
   ctx.beginPath();
   var topUnit = 0.5 * canvas.height - unitY;
   var bottomUnit = 0.5 * canvas.height + unitY;
   ctx.moveTo(0, topUnit);
   ctx.lineTo(canvas.width, topUnit);
   ctx.moveTo(0, bottomUnit);
   ctx.lineTo(canvas.width, bottomUnit);
   ctx.stroke();
  }
  //渲染三角函数
  function render(trigonometricFunction, color) {
   ctx.strokeStyle = color;
   ctx.beginPath();
   var isInRange = false;
   for(var x=0; x < canvas.width; x++) {
   var a = (x + i) / 180 * Math.PI;
   var y = trigonometricFunction(a);
   //tan值有可能是无穷大或无穷小
   if(isFinite(y)) {
    y = y * unitY + 0.5 * canvas.height;
    if(isInRange) {
    if(y < 0 || y > canvas.height) {
     isInRange = false;
    } else {
     ctx.lineTo(x, y);
    }
    } else {
    isInRange = true;
    ctx.moveTo(x, y);
    }
    if(x == 0) {
    ctx.fillStyle = color;
    var funcName = trigonometricFunction.toString();
    var reg = /function\s*(\w*)/i;
    var matches = reg.exec(funcName);
    ctx.fillText(matches[1], 0, y);
    } 
   } else {
    isInRange = false;
   }
   }
   ctx.stroke();
  }
  this.init = function() {
   function loop() {
   requestAnimationFrame(loop, canvas);
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   update();
   rendeRcoordinate();
   render(Math.sin, "red");
   render(Math.cos, "green");
   render(Math.tan, "blue");
   }
   loop();
  }
  }
  function init() {
  var canvas = document.getElementById("canvas");
  if(!isSupportCanvas(canvas)) {
   return;
  }
  setupRAF();
  var canvasController = new CanvasController(canvas);
  canvasController.init();
  }
  init();
 </script>
 </body>
</html>
</html>
Javascript 相关文章推荐
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
你不知道的 javascript【推荐】
Jan 08 #Javascript
js时间控件只显示年月
Jan 08 #Javascript
javascript函数的四种调用模式
Jan 08 #Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 #Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 #Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 #Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 #Javascript
You might like
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
从零学Python之入门(五)缩进和选择
2014/05/27 Python
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python中为什么要用self探讨
2015/04/14 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
python中的for循环
2018/09/28 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
《囚绿记》教学反思
2014/03/01 职场文书
工地食品安全责任书
2015/05/09 职场文书
2015年教师节新闻稿
2015/07/17 职场文书