JavaScript 动态三角函数实例详解
下面一段代码给大家分享JavaScript动态三角函数，具体代码如下所述：
<html>
<head>
<metacharset="utf8"/>
<title>三角函数图形</title>
<styletype="text/css">
body{
background-color:black;
}
#canvas{
position:absolute;
top:50%;
left:50%;
margin:-151px00-401px;
border:1pxdashed#171717;
}
</style>
</head>
<body>
<canvasid="canvas"width="800px"height="300px">您的浏览器不支持canvas</canvas>
<scripttype="text/javascript">
//判断是否支持canvaas
functionisSupportCanvas(canvas){
return!!(canvas.getContext&&canvas.getContext("2d"));
}
//requestAnimationFrame会自动使用最优的帧率进行渲染
functionsetupRAF(){
varlastTime=0;
//兼容各个浏览器，InternetExplorer11、GoogleChrome(MicrosoftEdge)、MozillaFirefox、Opera
varvendors=["ms","moz","webkit","o"];
for(vari=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){
varcurrentTime=newDate().getTime();
vartimeToCall=Math.max(0,16-(currentTime-lastTime));
varcallTime=currentTime+timeToCall;
varid=window.setTimeout(function(){
callback(callTime);
},timeToCall);
lastTime=callTime;
returnid;
};
}
//回退机制
if(!window.cancelAnimationFrame){
window.cancelAnimationFrame=function(id){
clearTimeout(id);
}
}
}
varCanvasController=function(canvas){
varctx=canvas.getContext("2d");
ctx.lineWidth=1;
ctx.textAlign="left";
ctx.textBaseline="middle";
ctx.font="bold18ptCalibri";
vari=0;
varstep=1;
varunitX=90
varunitY=canvas.height*0.3;
functionupdate(){
i+=step;
i%=360;
}
//渲染坐标
functionrendeRcoordinate(){
ctx.strokeStyle="white";
ctx.beginPath();
vartopUnit=0.5*canvas.height-unitY;
varbottomUnit=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();
}
//渲染三角函数
functionrender(trigonometricFunction,color){
ctx.strokeStyle=color;
ctx.beginPath();
varisInRange=false;
for(varx=0;x<canvas.width;x++){
vara=(x+i)/180*Math.PI;
vary=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;
varfuncName=trigonometricFunction.toString();
varreg=/function\s*(\w*)/i;
varmatches=reg.exec(funcName);
ctx.fillText(matches[1],0,y);
}
}else{
isInRange=false;
}
}
ctx.stroke();
}
this.init=function(){
functionloop(){
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();
}
}
functioninit(){
varcanvas=document.getElementById("canvas");
if(!isSupportCanvas(canvas)){
return;
}
setupRAF();
varcanvasController=newCanvasController(canvas);
canvasController.init();
}
init();
</script>
</body>
</html>
</html>