JavaScript 动态三角函数

最新推荐文章于 2023-03-26 07:24:42 发布

福州司马懿

最新推荐文章于 2023-03-26 07:24:42 发布

阅读量2.3k

点赞数 2

分类专栏： # JavaScript 动画文章标签： javascript 三角函数

转载请注明出处——https://blog.csdn.net/chy555chy

本文链接：https://blog.csdn.net/chy555chy/article/details/54195914

版权

JavaScript 动画专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<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() {
                window.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-window.lastTime));
                        var callTime = currentTime + timeToCall;
                        var id = window.setTimeout(function() {
                            callback(callTime);
                        }, timeToCall);
                        window.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;
                var i = 0;
                var step = 1;
                var unitX = 90
                var unitY = canvas.height * 0.3;

                function update() {
                    i += step;
                    i %= 360;
                }

                //渲染坐标
                function rendeRcoordinate() {
                    var color = "white";
                    ctx.strokeStyle = color;
                    ctx.fillStyle = color;
                    ctx.textBaseline = "top";
                    ctx.font = "normal 8pt Arial"

                    ctx.beginPath();
                    var halfCanvasHeight = 0.5 * canvas.height;
                    var topUnit = halfCanvasHeight - unitY;
                    var bottomUnit = halfCanvasHeight + unitY;
                    ctx.moveTo(0, topUnit);
                    ctx.lineTo(canvas.width, topUnit);
                    ctx.moveTo(0, halfCanvasHeight);
                    ctx.lineTo(canvas.width, halfCanvasHeight);
                    ctx.moveTo(0, bottomUnit);
                    ctx.lineTo(canvas.width, bottomUnit);
                    ctx.stroke();

                    var doubleUnitX = 2 * unitX;
                    var zero = unitX - i;
                    while(zero < 0) {
                        zero += doubleUnitX;
                    }
                    ctx.beginPath();
                    for(var a = zero; a < canvas.width; a += doubleUnitX) {
                        ctx.moveTo(a, 0);
                        ctx.lineTo(a, canvas.height);
                        ctx.fillText("(0,0)", a, halfCanvasHeight);
                    }
                    ctx.stroke();
                }

                //绘制x=sin(a),y=cos(a)的函数
                function renderXSinYCos() {
                    var color = "yellow";
                    ctx.textAlign = "center";
                    ctx.textBaseline = "bottom";
                    ctx.font = "normal 2pt Arial"
                    ctx.strokeStyle = color;
                    ctx.fillStyle = color;

                    ctx.beginPath();
                    var zeroX = 0.5 * canvas.width;
                    var zeroY = 0.5 * canvas.height;
                    for(var x = 0; x < canvas.width; x++) {
                        var a = (x + i) / 180 * Math.PI;
                        var curX = Math.sin(a) * unitX + zeroX;
                        var curY = Math.cos(a) * unitY + zeroY;
                        if(x == 0) {
                            ctx.moveTo(curX, curY);
                        } else {
                            ctx.lineTo(curX, curY);
                        }
                    }
                    ctx.stroke();

                    var text = "x=sin(a)\ny=cos(a)";
                    var textArr = text.split("\n");
                    for(var index = textArr.length - 1, y = zeroY; index >= 0; index--, y -= 20) {
                        ctx.fillText(textArr[index], zeroX, y);
                    }
                }

                //渲染三角函数
                function render(trigonometricFunction, color) {
                    ctx.strokeStyle = color;
                    ctx.textAlign = "left";
                    ctx.textBaseline = "middle";
                    ctx.font = "bold 18pt Calibri";

                    ctx.beginPath();
                    var isLastInRange = 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(isLastInRange) {
                                if(y < 0 || y > canvas.height) {
                                    isLastInRange = false;
                                } else {
                                    ctx.lineTo(x, y);
                                }
                            } else {
                                if(!(y < 0 || y > canvas.height)) {
                                    isLastInRange = 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 {
                            isLastInRange = false;
                            break;
                        }
                    }
                    ctx.stroke();
                }

                this.init = function() {
                    function loop() {
                        requestAnimationFrame(loop, canvas);
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        update();
                        rendeRcoordinate();
                        renderXSinYCos();
                        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>

这里写图片描述

注意：在绘制曲线时，例如波浪等看似很像正弦（余弦）函数，基本都是使用贝塞尔曲线。

福州司马懿

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 动态三角函数

<html> <head> <meta charset="utf8" /> <title>三角函数图形</title> <style type="text/css"> body { background-color:black; } #can
复制链接

扫一扫