Javascript-Canvas實現三角函數曲線動畫圖

本文轉載自查看原文 2017-02-06 12:46 1311 JavaScript筆記

以本圖為例，要做這張圖，需要一些數學知識（三角函數sin，cos），有canvas的基礎知識

Html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="Script/jquery-1.10.2.js"></script>
    <script src="Script/testStudy.js"></script>
</head>
<body style="width:100%; height:100%;">
    <canvas id="study" width="600" height="360">您的瀏覽器不支持 HTML5 canvas 標簽。</canvas>
    <script>
        curve();
    </script>
</body>
</html>

JavaScript

var curve = function () {
    var c = document.getElementById("study");
    var ctx = c.getContext("2d");

    //線條主色
    var mianColor = "#e2dedb"

    //畫圖函數
    var Drawing = {
        line: function (starxy, endxy, lineWidth, color) {
            ctx.strokeStyle = color;
            ctx.lineWidth = lineWidth;
            ctx.beginPath();
            ctx.moveTo(starxy[0], starxy[1]);
            ctx.lineTo(endxy[0], endxy[1]);
            ctx.stroke();
        },
        ract: function (starxy, ractWH, color) {
            ctx.fillStyle = color;
            ctx.fillRect(starxy[0], starxy[1], ractWH[0], ractWH[1]);
        },
        ractBorder: function (starxy, ractWH, color, lineWidth) {
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = color;
            ctx.strokeRect(starxy[0], starxy[1], ractWH[0], ractWH[1]);
        },

        /*Drawing.triCurve(triangle, star, cp, color)
          triangle:三角函數
          star：{x：開始x坐標，y：開始的y坐標}
          cp：{xw：控制x的寬度，yh：控制y的高度，s：位移}
          color：線條顏色
        */
        triCurve: function (triangle, star, cp, color) {
            ctx.strokeStyle = color;
            ctx.beginPath();
            ctx.moveTo(star.x, star.y);
            //中心判斷
            var change = false;
            //中點計算
            var count = cp.yh;
            for (var i = cp.s; i * cp.xw - cp.xw * cp.s + star.x < 600 ; i += 0.1) {
                count += 0.5;
            }
            var center = parseInt(count / 2);
            //三角函數曲線
            for (var i = cp.s; i * cp.xw - cp.xw * cp.s + star.x < 600; i += 0.1) {
                if (change === false && cp.yh < center) { cp.yh += 0.5; }
                if (change === false && cp.yh === center) { change = true; cp.yh -= 0.5; }
                if (change === true && cp.yh < center) { cp.yh -= 0.5; }
                var x = i * cp.xw - cp.xw * cp.s + star.x;
                var y = Math[triangle](i * cp.angle) * cp.yh + star.y;
                ctx.lineTo(x, y);
            }
            ctx.stroke();
            ctx.closePath();

        },
    }

    //背景填充
    Drawing.ract([0, 0], [600, 360], "#333333");

    //播放條
    var play = function (btn) {
        ctx.clearRect(0, 0, 600, 130);
        Drawing.ract([0, 0], [600, 130], "#333333");
        var playLineStar = [93, 105];
        var playLineWH = [494, 105];
        var playBtnWH = [11, 21];
        Drawing.line(playLineStar, playLineWH, 4, mianColor);
        var playBtnStarX;
        var playBtnStarY = playLineWH[1] - playBtnWH[1] / 2;
        btn == undefined ? playBtnStarX = (playLineWH[0] + playLineStar[0]) / 2 - playBtnWH[0] / 2 : playBtnStarX = 4 * btn + playLineStar[0];
        Drawing.ractBorder([playBtnStarX, playBtnStarY], playBtnWH, "#9d9996", 1);
        Drawing.ract([playBtnStarX += 1, playBtnStarY += 1], [playBtnWH[0] - 2, playBtnWH[1] - 2], mianColor);
    }
    play();

    //鼠標滾動控制播放條
    var waveGo;
    var distance = 0;
    var scrollFunc = function (e) {
        e = e || window.event;
        var mouseMove;
        e.wheelDelta ? mouseMove = e.wheelDelta : mouseMove = e.detail;
        if (mouseMove > 0) {
            distance += 5;
            if (distance >= 100) distance = 100;
        }//up
        if (mouseMove < 0) {
            distance -= 5;
            if (distance <= 0) distance = 0;
        }//down
        play(distance);
        clearInterval(waveGo);
        waveGo = setInterval(function () {
            wave(distance);
        }, 100)
    }
    if (document.addEventListener) {//firefox
        document.addEventListener('DOMMouseScroll', scrollFunc, false);
    }
    window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome


    //三角函數曲線動畫
    var dong = 1, time = 1000 / 60, cango;
    var wave = function (ad) {
        var adjust;
        ad == undefined ? adjust = 28 : adjust = ad + 15 >= 100 ? 100 : ad + 15;
        console.log(adjust);
        ctx.clearRect(0, 130, 600, 360);
        Drawing.ract([0, 130], [600, 360], "#333333");
        if (dong === 1) { cango = false; }
        if (!cango && dong < 3) { dong += 1; }
        if (dong === 3) { cango = true; }
        if (cango && dong <= 3) { dong -= 1; }
        time++;
        Drawing.triCurve("sin", { x: 0, y: 238 }, { xw: adjust, yh: 5 * (1 + dong / 10), angle: Math.PI / 2, s: time / 10 }, "#ffffff");
        Drawing.triCurve("cos", { x: 0, y: 238 }, { xw: adjust + 12, yh: 5 * (1 + dong / 10), angle: Math.PI / 2, s: time / 10 }, "#424242");
        Drawing.triCurve("sin", { x: 0, y: 238 }, { xw: adjust + 22, yh: 5 * (1 + dong / 10), angle: Math.PI / 2, s: time / 10 }, "#5e5e5e");
        Drawing.triCurve("cos", { x: 0, y: 238 }, { xw: adjust + 22, yh: 5 * (1 + dong / 10), angle: Math.PI / 2, s: time / 10 }, "#a2a2a2");
        Drawing.triCurve("sin", { x: 0, y: 238 }, { xw: adjust, yh: 5 * (1 + dong / 10), angle: Math.PI / 2, s: time / 10 }, "#9a9a9a");
    }
    waveGo = setInterval(wave, 100)
}

最終一開始出來呈現的圖像應該是，播放條居中，曲線圖與實例圖相似。

而我們的播放條，簡單實現了利用鼠標滾動去控制曲線圖的彎曲幅度。

作者：leona

原文鏈接：http://www.cnblogs.com/leona-d/p/6369905.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 三角函數與JavaScript 三角函數與緩入緩出動畫及C#實現（圖文講解）基本的三角函數總結三角函數的定義 FPS 游戲實現GDI透視 (三角函數) 高數——三角函數三角函數專題輔導題 sql server 三角函數三角函數公式關系梳理求三角函數的最值