下面一段代码给大家分享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>
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
内蒙古资源网 Copyright www.nmgbbs.com
暂无“JavaScript 动态三角函数实例详解”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。