用途
新着
履歴
分類

JS 波のアニメーション

JS 波のアニメーション
canvasを使ったアニメーションで波のような動きのサンプルです。

円弧の描画を繰り返して、波のようなアニメーションを実装しています。

実装にはjQueryを使っています。

HTML

<canvas id="canvas_wave" width="200" height="50"></canvas>

JSはこちら


$(function() {
    demo_wave();
})

function demo_wave() {
    function e() {
        demo_obj = document.getElementById("canvas_wave"),
        demo_cntxt = demo_obj.getContext("2d"),
        demo_h = 50, //高さ
        demo_w = 200, //横幅
        demo_h_half = Math.floor(demo_h / 2), //少数切捨
        demo_draw()
    }
    function demo_draw() {
        demo_cntxt.clearRect(0, 0, demo_w, demo_h), //座標領域のクリア
        demo_cntxt.fillStyle = "#44DDEE", //塗りの色
        demo_cntxt.globalAlpha = 1, //塗りの透明度
        demo_cntxt.beginPath(), //パスを開始

        demo_anime(demo_draw.t), //アニメの描画

        demo_cntxt.lineTo(demo_w + 10, demo_h), //lineTo:線の終点
        demo_cntxt.lineTo(0, demo_h), //lineTo:線の終点
        demo_cntxt.closePath(), //パスを閉じる
        demo_cntxt.fill() //fillStyleの反映

        // カウントアップやら値のセット
        demo_draw.seconds = demo_draw.seconds + 0.04, //波の流れの速さが変わる
        demo_draw.t = demo_draw.seconds * Math.PI, //円周率

        setTimeout(demo_draw, 35) //波のコマの長さms
    }

    function demo_anime(e) {
        var a = e
          , o = Math.sin(a);
        for (demo_cntxt.moveTo(0, u * o + demo_h_half), i = 0; i <= demo_w + 10; i += 10) //moveTo:始点の移動
            a = e + i / u,
            o = Math.sin(a) / 3,
            demo_cntxt.lineTo(i, u * o + demo_h_half) //lineTo:線の終点
    }

    //初期値
    var u = 50; //波の高さ
    demo_draw.seconds = 0,
    demo_draw.t = 0,
    e()
}
公開 2020-03-28 22:57:39
更新 2020-03-28 23:01:10
このページの二次元コード
JS 波のアニメーション

人気のサンプル

search -  category -  about
© 2024 kipure
Top