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

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

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

1. タイトル

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

2. アイデア

(1)まず、キャンバス要素内のグラフィックスと、線分、円、時針、分針、秒針の描き方を完全に理解する必要があります。
(2)次に、ページレイアウトに時計のグラフィックをレンダリングし、目盛りの位置と、時針、分針、秒針の位置の静的効果を描画して、タイマーが後で動的な効果を実現できるようにする必要があります。
(3)これらの作業を完了した後、最も難しい部分は、時針、分針、秒針をスケールに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>

6. まとめ

キャンバスを学習する過程では、キャンバス要素の描画方法を十分に理解し、さらに練習して、これらの方法を明確に理解し、慣れることなく使用する必要があります。さあ、試してみましょう!

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript キャンバスでカラフルな太陽のハロー効果を実現

<<:  MySQL 5.7 zip アーカイブ バージョンのインストール チュートリアル

>>:  DockerコンテナのIPアドレスを表示する方法

推薦する

Windows Server 2008 のサーバー パフォーマンス監視に関するチュートリアル

次に、ログ管理、ログのアーカイブ、ログのトラブルシューティング、イベントの転送と収集のためのコンピュ...

deepin apt コマンドを使用して最新バージョンの docker をインストールする方法

ステップ1: Ubuntuソースを追加するルートに切り替える suルートソフトウェアソースファイルの...

WeChatミニプログラムQRコード生成ツール weapp-qrcode 詳細説明

WeChat ミニプログラム - QR コード ジェネレーターダウンロード: weapp-qrcod...

知らないかもしれない実用的なTypeScriptのヒント

目次序文関数のオーバーロードマッピングタイプ部分的、読み取り専用、Null 可能、必須選択、記録除外...

元のPATHを上書きしてコマンドが見つからないというメッセージが表示されるコマンド失敗の問題を解決する方法

同僚から、LINUX サーバー上の多くのコマンドが (コマンドが見つかりません) というプロンプトで...

CSS フレックスベースのテキストオーバーフロー問題の解決方法

重要でないflex-basisテキストオーバーフローに省略記号を追加するという小さな機能に多くの問題...

マテリアルデザインで水滴アニメーションボタンを実現するための純粋なCSS

序文こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。 これは、Google Mat...

HTMLフォーム入力監視の詳細な理解

今日、入力イベントに関するブログ投稿を見て、気まぐれで関連情報を整理してみました。イベント:関数 c...

ローカルサーバーを構築するためのwebpack-dev-serverの実装

目次序文webpack-deb サーバーwebpack-dev-server 起動エラー解決策1解決...

MySQL マスタースレーブレプリケーションでエラーをスキップする方法

1. 従来のbinlogマスタースレーブレプリケーション、エラー報告をスキップする方法 mysql&...

jsはテーブルの追加と削除の操作を動的に実装します

この記事の例では、jsでテーブルを動的に追加および削除するための具体的なコードを参考までに共有してい...

Navicatを使用してクラウドサーバーデータベースにリモート接続する方法

秘密鍵を開かずにリモート サーバーのデータベースに接続するのは非常に便利です。新しい接続でデータを入...

Docker の NFS-Ganesha イメージを使用して NFS サーバーを構築する詳細なプロセス

目次1. NFS-Ganeshaの紹介2. NFS-Ganeshaの設定3. NFS-Ganesha...

Linux の Docker コンテナで bash を終了する 2 つの方法

bash を終了する場合は、次の 2 つのオプションがあります。最初のもの: Ctrl + d を押...

MySQL 学習ノート: データ エンジン

現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...