JavaScript 动态三角函数实例详解
程序员文章站
2023-12-14 22:12:10
下面一段代码给大家分享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>