JavaScript 动态三角函数实例详解
更新时间：2017年01月08日 09:36:08 作者：司马懿字仲达
本文通过实例代码给大家实例讲解了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>
相关文章
这篇文章主要为大家详细介绍了微信小程序实现登录注册切换效果，简易版tab切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了JavaScript缺少insertAfter解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要给大家介绍了关于uniapp开发微信小程序遇到的问题的相关资料,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考,需要的朋友可以参考下2023-01-01
本文主要对html5 canvas的使用进行了详细的介绍。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了javascript实现移动端触屏拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
这篇文章主要为大家详细介绍了js表单验证，JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了JavaScript父子窗体间的调用方法,涉及javascript调用窗体的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法，本文给大家介绍JavaScript解决单线程缺陷——webWorker,需要的朋友可以参考下2023-06-06
最近在项目中经常遇到使用富文本框的情况,下面这篇文章主要给大家介绍了关于javascript实现富文本框选中对齐的思路与代码,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了ES6概念 Symbol toString()方法,需要的朋友可以参考下2016-12-12
最新评论