カラフルな時計効果を実現する 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アドレスを表示する方法

推薦する

Linux システムでのユーザー管理の概要

目次1. ユーザーとユーザーグループの重要性1) ユーザーの存在意義2) ユーザーグループの重要性2...

webpackでCSSを分割・圧縮し、リンクでインポートする手順

まずコードファイルの構造を見てみましょう。エントリファイル (index1.js) の内容: ...

MySQLの自動増分IDについて知っておくべきこと

はじめに: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (A...

VMware Workstation のインストール (Linux カーネル) Kylin グラフィック チュートリアル

この記事では、VMware WorkstationにKylinをインストールする方法を参考までに紹介...

標準のMySQL (x64) Windowsバージョンのインストール手順の詳細な説明

MySQL x64 はインストーラーを提供していません、インストーラーを提供していません、インストー...

HTML で複数のフォームのテキスト ボックスを揃える方法

フォームのコードは図の通りです。スタイルシートがまだ追加されていないため、フォームが整列されておらず...

優れたウェブワイヤーフレーム設計・制作ツール13選を紹介

プロジェクトの作業を開始するときは、ワイヤーフレームを使用してアイデアをスケッチすることが重要です。...

Vue3.0 は虫眼鏡効果のケーススタディを実装します

達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...

よく使われるnginxの書き換えルールの詳細な説明

この記事では、Web ページのリンクを美しくするためによく使用される書き換えルールをいくつか紹介しま...

分散監視システムにおけるZabbixのアクティブ、パッシブ、Web監視のプロセスの詳細な説明

前回の記事では、Zabbix のネットワーク検出機能について学習し、アクションと組み合わせてホストの...

MySQL データベースの詳細な説明 (Ubuntu 14.0.4 LTS 64 ビットベース)

1. MySQLデータベースの構成と関連概念まず、MySQL はリレーショナル データベースである...

フレックスレイアウトの互換性の問題の概要

1. W3C バージョンの flex 2009年版フラグ: display: box; または bo...

Dockerでnginxをデプロイし、設定ファイルを変更する方法

Dockerでnginxをデプロイするのはとても簡単ですたった 1 行のコマンド: docker 実...

Apache FlinkCEP でタイムアウトステータス監視を実装するための詳細な手順

CEP - 複合イベント処理。ご注文後、一定期間内にお支払いの確認が取れませんでした。タクシーの配...

Docker で Springboot プロジェクトを実行する実装

導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...