カラフルな時計効果を実現する JavaScript キャンバス

キャンバスを使ってカラフルな時計を書いてみよう！

1. タイトル

（１）時計のケースが与えられ、ページに時計を描いてコンピュータの現在のシステム時刻を取得するように求められますか？（スタイルはh5に限定されません）

2. アイデア

（１）まず、キャンバス要素内のグラフィックスと、線分、円、時針、分針、秒針の描き方を完全に理解する必要があります。
（２）次に、ページレイアウトに時計のグラフィックをレンダリングし、目盛りの位置と、時針、分針、秒針の位置の静的効果を描画して、タイマーが後で動的な効果を実現できるようにする必要があります。
（３）これらの作業を完了した後、最も難しい部分は、時針、分針、秒針をスケールに1つずつ対応させる方法です。次に、円弧システムを使用して、タイマーが毎秒クロック機能を呼び出すようにする必要があります。
（4）これらの効果を実現するには、バグを回避するためにキャンバスを時間内に保存してクリアします。（5）機能を実現するには、JavaScriptを使用してページをレンダリングします。

3. 効果表示図

4. ライティング

時間を取得:

現在のシステム時間を取得します。時間オブジェクトを使用して、現在の正確な時間を取得します。時間は整数ではないため、時間を浮動小数点数に変換する必要があります。後続のタイマー呼び出しを容易にするために、現在 13、14、15... はありません。そのため、3 項式を使用して 24 時間制を 12 時間制に変換します。

分目盛りは時間目盛りと同じなので、時間目盛りを例に簡単に説明します。

時針のスケールが 12 個あるため、次のスケールを描画するのに便利なので、for ループを使用して 12 回ループします。
キャンバスの中心点を円の原点に設定し、キャンバスを回転させます。
完全な円は 360 度で、12 の等しい部分に分割されます。各スケールは 30 の円弧を回転する必要があります。キャンバスは 1 回につき 30 の円弧を回転し、12 回回転します。
スケールを描画し、ランダムなカラースタイルを適用します。

時針の描画（時針と分針は基本的に同じです）：

まず、キャンバスの状態を保存し、線の太さと色を設定する必要があります。
キャンバスの原点をキャンバスの中心にリセットします。
時針は、秒針と分針の回転に応じて、毎回 30 回転する必要があります。
時針セグメントを描画し、時針ページにレンダリングします。

ダイヤルの中心を描きます。

キャンバスの円の中心を見つけます。
時間、分、秒の 3 つのポインターの交点 (中心点) として、円の中心に半径 4 の実線の原点を描きます。

テキスト描画時間:

システム時間は上記で取得されました。あとはスタイルと位置を設定して、時計ページにレンダリングするだけです。

5. 参照コードブロック

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>
    <canvas id="時計" 幅="500" 高さ="500" ></canvas>
    <スクリプト>
        var キャンバス = document.getElementById("時計");
        var コンテキスト = canvas.getContext("2d");
        
        // canvas.style.backgroundColor=getRandom()
        関数drawClock(){
        // キャンバスをクリアします context.clearRect(0,0,canvas.width,canvas.height)
        //時刻を取得する var now = new Date()
        var 秒 = now.getSeconds()
        var 分 = now.getMinutes()
        var hour1 = now.getHours()
        var hour=hour1+minute/60; // 24 時間制を 12 時間制に変換し、浮動小数点型を使用します hour=hour>12?hour-12:hour;
        var time=now.toLocaleString() //合計時間を取得 //ダイヤルを描画context.beginPath() //開始パスcontext.strokeStyle=getRandom() //線の色context.lineWidth=8 //線の太さcontext.arc(250,250,200,0,360,false)
        コンテキスト.ストローク()
        context.closePath() //パスの終了 //描画時間スケール for(var i=0;i<12;i++){
            context.save() //現在のキャンバスの状態を保存します context.translate(250,250) //キャンバスの原点をキャンバスの中心にリセットします context.lineWidth=3;    
            context.rotate(Math.PI/180*30*i) //キャンバスの回転角度を設定します。パラメータはラジアンです。Math.PI/180*30
            コンテキスト.beginPath()
            context.strokeStyle = getRandom()
            context.moveTo(0,-180) //開始位置 context.lineTo(0,-195) //終了位置 context.stroke()        
            コンテキスト.closePath()
            コンテキストを復元する()

        }
        //スケールを描画する for(var i=0;i<60;i++){
            context.save() //現在のキャンバスの状態を保存します context.translate(250,250) //キャンバスの原点をキャンバスの中心にリセットします context.lineWidth=1;    
            context.rotate(Math.PI/180*6*i) //キャンバスの回転角度を設定します。パラメータはラジアンです。Math.PI/180*30
            コンテキスト.beginPath()
            context.strokeStyle = getRandom()
            context.moveTo(0,-188) //開始位置 context.lineTo(0,-195) //終了位置 context.stroke()        
            コンテキスト.closePath()
            コンテキストを復元する()

        }
        // 時針 context.save()
        コンテキスト.lineWidth=5;
        context.strokeStyle = getRandom()
        コンテキスト.翻訳(250,250)
        コンテキストを回転(時間*30*Math.PI/180)
        コンテキスト.beginPath()
        コンテキストを移動(0,10)
        コンテキスト.lineTo(0,-100)
        コンテキスト.ストローク()
        コンテキスト.closePath()
        コンテキストを復元する()

        //分針 context.save()
        コンテキスト.lineWidth=3;
        context.strokeStyle = getRandom()
        コンテキスト.翻訳(250,250)
        context.rotate(分*6*Math.PI/180)
        コンテキスト.beginPath()
        コンテキストを移動(0,15)
        コンテキスト.lineTo(0,-130)
        コンテキスト.ストローク()
        コンテキスト.closePath()
        コンテキストを復元する()

         // 2番目のハンド context.save()
        コンテキスト.lineWidth=1;
        context.strokeStyle = getRandom()
        コンテキスト.翻訳(250,250)
        context.rotate(秒*6*Math.PI/180)
        コンテキスト.beginPath()
        コンテキストを移動(0,15)
        コンテキスト.lineTo(0,-170)
        コンテキスト.ストローク()
        コンテキスト.closePath()
        コンテキストを復元する()
        
        //ダイヤルセンターcontext.beginPath()
        コンテキスト.lineWidth=1;
        context.fillStyle="赤"
        コンテキスト.arc(250,250,4,0,360,false)
        コンテキスト.fill()
        コンテキスト.closePath()

        //テキストを描画する時間 context.font="18px Songti Bold"
        context.fillStyle = getRandom()
        コンテキスト.fillText(時間,160,150)
        }
        描画クロック()
        setInterval(描画クロック、1000)

        関数 getRandom(){
            var col="#";
            (var i=0;i<6;i++){
              col+=Math.round(Math.random()*16).toString(16)
            }
            戻り列
        }

    </スクリプト>
</本文>
</html>