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>
相关文章
这篇文章主要介绍了使用原生js实现拖拽和粘贴上传图片功能,Vue/Rect 生态用多了都快忘记原生js怎么写了,今天需要直接在服务器裸写个页面,实现 textarea 文本框里接收拖拽多个图片,需要的朋友可以参考下2024-04-04
用正则获取指定路径文件的名称...2007-02-02
这篇文章给大家总结下JS实现数组去重方法(六种方法)，面试中也经常会遇到这个问题。文中给大家引申的还有合并数组并去重的方法，感兴趣的朋友跟随脚本之家小编一起学习吧2017-07-07
这篇文章主要为大家详细介绍了微信小程序视图容器（swiper）组件创建轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
2009-06-06
这篇文章主要介绍了js 去除字符串第一位逗号的方法,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了JS基于正则截取替换特定字符之间字符串操作方法,结合具体实例形式分析了JS基于正则实现针对特殊字符、数字等字符串类型的截取操作相关技巧,需要的朋友可以参考下2017-02-02
这篇文章主要为大家分享了JS html时钟的制作代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
function, new function, new Function之间的区别
function, new function, new Function之间的区别...2007-03-03
最近在一个微信公众号中用到了swiper图片轮播插件。接下来为大家介绍插件的用法,需要的朋友可以参考下2017-01-01
最新评论