キャンバスをベースにした超クールな水光効果を実現

この記事の例では、キャンバスをベースにした超クールな水の光の効果を実装するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

<!DOCTYPE html>  
<html>  
<ヘッド>  
    <メタ文字セット="UTF-8">  
    <title>キャンバスをベースにした超クールな水の光の効果</title>  
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
        }
        キャンバス{
            境界線: 1px 実線の赤;
            幅: 100%;
            高さ: 100%;
        }
    </スタイル>
</head>  
<body onselectstart="falseを返す">  
        <!-- キャンバス タグを追加し、赤い枠線を追加して、ページ上で見やすくします -->  
        <キャンバスid="myCanvas">  
        お使いのブラウザはキャンバス タグをサポートしていません。   
        </キャンバス>
<スクリプト src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></スクリプト>
<script type="text/javascript">
    var キャンバス = document.getElementById("myCanvas");  
    var ctx = canvas.getContext("2d");    
    var cx1 = キャンバス.offsetLeft;
    var cy1 = キャンバス.offsetTop;
    var cx2 = canvas.offsetLeft + canvas.offsetWidth;
    var cy2 = canvas.offsetTop + canvas.offsetHeight;
    bbox を canvas.getBoundingClientRect() に追加します。  
    $(関数(){
        var direction = 'right'、x = y = right_count = down_count = left_count = up_count = 0;
        ctx.beginPath(); //新しい描画パスを開始します ctx.moveTo(x, y); //線の開始点の座標を(0,0)として定義します
        setInterval(関数(){
            ctx.strokeStyle = '#'+Math.floor(Math.random()*16777215).toString(16);
            スイッチ(方向){
                ケース 'right':
                    if(x >= 300 - 右カウント){
                        方向 = '下';    
                        右カウント++;
                    }それ以外{
                        ++;
                    }
                    壊す;
                ケース「ダウン」:
                    if(y >= 150 - ダウンカウント){
                        方向 = '左';
                        ダウンカウント++;
                    }それ以外{
                        y++;
                    }
                    壊す;
                ケース「左」:
                    if(x <= 左カウント){
                        方向 = '上';
                        左_count++;
                    }それ以外{
                        x--;
                    }
                    壊す;
                ケース「上」:
                    y <= up_count + 1の場合{
                        方向 = '右';
                        アップカウント++;
                    }それ以外{
                        y--;
                    }
                    壊す;
            }
            ctx.lineTo(x, y);
            ctx.lineCap = 'round';
            ctx.lineWidth = 1; //線分の幅を設定します ctx.stroke(); //座標点シーケンスのパスに沿って直線を描画します }, 1);
    }) 
</スクリプト>  
</本文>  
</html>

エフェクトのスクリーンショット:

走行灯は常に点灯しており、主にここを周回しています。