当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript 动态三角函数实例详解

JavaScript 动态三角函数实例详解

2019年03月31日  | 移动技术网IT编程  | 我要评论

下面一段代码给大家分享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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网