JavaScript 动态三角函数实例详解
下面一段代码给大家分享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>
相关推荐
-
AngularJS中一般函数参数传递用法分析
本文实例讲述了AngularJS中一般函数参数传递用法.分享给大家供大家参考,具体如下: 1. 模型参数 直接使用变量名,不要加引号 <!doctype html> <html ng-app="passAter"> <head> <meta charset="utf-8"/> </head> <body> <div ng-controller="passCtrl">
-
js调用父框架函数与弹窗调用父页面函数的简单方法
调用父级中的 aaa的函数 子页面中: onclick="window.parent.frames.aaa()" 父页面中: function aaa() { alert('bbbbb'); } frame框架里的页面要改其他同框架下的页面或父框架的页面就用parent window.opener引用的是window.open打开的页面的父页面. window.frames对象可以引用iframe里的页面,也可以引用frameset里的页面. 可以这样 window.frames[0]
-
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换&#XXX函数代码
最近看不少在线工具里面都有一些编码转换的代码,很多情况下我们都用得到,这里我们小编就跟大家分享一下这些资料 Unicode介绍 Unicode(统一码.万国码.单一码)是一种在计算机上使用的字符编码. Unicode 是为了解决传统的字符编码方案的局限而产生的,它为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨语言.跨平台进行文本转换.处理的要求. Unicode是国际组织制定的可以容纳世界上所有文字和符号的字符编码方案.Unicode用数字0-0x10FFFF来映射这些字符,最多
-
深入理解Node.js 事件循环和回调函数
本文详细的介绍了Node.js 事件循环和Node.js回调函数,废话不多说了,具体看下面把. 一.Node.js 事件循环 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高.Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发.Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现.Node.js 单线程类似进入一个while(true)的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观
-
JS中关于事件处理函数名后面是否带括号的问题
今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Level 2.这两种方式最大的区别就在于DOM 0级事件处理只能用于事件冒泡,而DOM 2级事件处理却可以通过设置第三个参数来分别支持事件冒泡和事件捕获. DOM 0级事件处理一般是直接把一个函数分配给一个事件处理程序,既可以在元素中直接分配一个事件处理程序,如方式一所示;也可以在脚本中把函数分配给事件处
-
JavaScript 动态三角函数实例详解
下面一段代码给大家分享JavaScript 动态三角函数,具体代码如下所述: <html> <head> <meta charset="utf8" /> <title>三角函数图形</title> <style type="text/css"> body { background-color:black; } #canvas { position:absolute; top:50%; left:
-
Linux静态库与动态库实例详解
Linux静态库与动态库实例详解 1. Linux 下静态链接库编译与使用 首先编写如下代码: // main.c #include "test.h" int main(){ test(); return 0; } // test.h #include<iostream> using namespace std; void test(); // test.c #include "test.h" void test(){ cout<< &quo
-
JavaScript hasOwnProperty() 函数实例详解
hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性.如果有,返回true,否则返回false. 该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法. IE 5.5+.FireFox.Chrome.Safari.Opera等主流浏览器均支持该函数. 语法 object.hasOwnProperty( propertyName ) 参数 参数 描述 propertyName Str
-
JavaScript数组方法实例详解
目录 简介 创建数组 创建方法 详解 方法大全 join() push()和 pop() shift() 和 unshift() sort() reverse() concat() slice() splice() indexOf()和 lastIndexOf() forEach() map() filter() fill() (ES6 新增) every() some() includes() (ES7) reduce()和 reduceRight() toLocaleString() 和
-
Vue 自定义动态组件实例详解
现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这些组件库满足不了我们的开发需求,这时候我们就需要自己写一个插件. 举第一个栗子 用vue-cli搭建好项目目录之后,在src/components下面新建一个文件夹放我们要写的插件,如图所示: index.vue里写我们的组件,代码如下: index.js里面写index.vue的install方法,并用Vue.component注册组件,代码如下: 接下来我们要在默认的main.js里将刚刚写的index.js
-
javascript 实现动态侧边栏实例详解
javascript 实现动态侧边栏 总的来说就是利用 鼠标悬停onmouseover 和 鼠标移除onmouseout 这两个时间来完成的. 首先是HTML 结构 <body> <div id="div1"> <span>侧边栏</span> </div> </body> 然后是css的样式: #div1{ width:150px; height:200px; background:#999999; pos
-
JavaScript静态作用域和动态作用域实例详解
静态作用域指的是一段代码,在它执行之前就已经确定了它的作用域,简单来说就是在执行之前就确定了它可以应用哪些地方的作用域(变量). 动态作用域–函数的作用域是在函数调用的时候才决定的 JavaScript采用的是词法作用域即静态作用域: // 静态作用域: var a = 10; function fn() { var b = 1; console.log(a + b); } fn(); // 11 在创建fn函数时的时候就已经确定了它可以作用哪些变量,如果函数fn里面有变量a就直接操作变量a,
-
JavaScript作用域链实例详解
本文实例讲述了JavaScript作用域链.分享给大家供大家参考,具体如下: 跟其他语言一样,变量和函数的作用域揭示了这些变量和函数的搜索路径.对于JavaScript而言,理解作用域更加重要,因为在JavaScript中,作用域可以用来确定this的值,并且JavaScript有闭包,闭包是可以访问外部环境的作用域的. 每一个JavaScript的函数都是Function对象的一个实例,Function对象有一个内部属性[[Scope]],这个属性只能被JavaScript的引擎访问.通过[[
-
javascript 内存模型实例详解
本文实例讲述了javascript 内存模型.分享给大家供大家参考,具体如下: 我对于 JavaScript 的内存模型一直都比较困惑,很想了解在操作变量的时候,JS 是如何工作的.如果你和我有同样的困惑,希望这篇文章能给你一些启发. 译文,喜欢原文的可以直接拉到底部 当我们声明变量.初始化变量.更改变量值的时候,到底会发生什么?JavaScript 是如何实现这些基本的功能?最重要的是,我们如何才能理解这些基础知识? 本文将覆盖以下 4 个方面: JavaScript 原始数据类型的变量声明和
-
JavaScript模块模式实例详解
本文实例讲述了JavaScript模块模式.分享给大家供大家参考,具体如下: 在JS中没有Class的概念,那么如何体现Object的Public和Private属性呢,答案就是模块模式(Module Pattern). JS中有一个显著的特性: 匿名函数(anonymous function),通过匿名函数的建立和执行,匿名函数里的代码就形成了一个闭包(closure),从而形成,封装和控制一个对象的Private和Public的特性,避免了全局变量的泛滥和与其他脚本的冲突. (functio