キャンバスを使ってカラフルな時計を書いてみよう! 1. タイトル(1)時計のケースが与えられ、ページに時計を描いてコンピュータの現在のシステム時刻を取得するように求められますか? (スタイルはh5に限定されません) 2. アイデア(1)まず、キャンバス要素内のグラフィックスと、線分、円、時針、分針、秒針の描き方を完全に理解する必要があります。 3. 効果表示図4. ライティング時間を取得: 現在のシステム時間を取得します。時間オブジェクトを使用して、現在の正確な時間を取得します。時間は整数ではないため、時間を浮動小数点数に変換する必要があります。後続のタイマー呼び出しを容易にするために、現在 13、14、15... はありません。そのため、3 項式を使用して 24 時間制を 12 時間制に変換します。 分目盛りは時間目盛りと同じなので、時間目盛りを例に簡単に説明します。
時針の描画(時針と分針は基本的に同じです):
ダイヤルの中心を描きます。
テキスト描画時間: システム時間は上記で取得されました。あとはスタイルと位置を設定して、時計ページにレンダリングするだけです。 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7 zip アーカイブ バージョンのインストール チュートリアル
目次1. ユーザーとユーザーグループの重要性1) ユーザーの存在意義2) ユーザーグループの重要性2...
まずコードファイルの構造を見てみましょう。エントリファイル (index1.js) の内容: ...
はじめに: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (A...
この記事では、VMware WorkstationにKylinをインストールする方法を参考までに紹介...
MySQL x64 はインストーラーを提供していません、インストーラーを提供していません、インストー...
フォームのコードは図の通りです。スタイルシートがまだ追加されていないため、フォームが整列されておらず...
プロジェクトの作業を開始するときは、ワイヤーフレームを使用してアイデアをスケッチすることが重要です。...
達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...
この記事では、Web ページのリンクを美しくするためによく使用される書き換えルールをいくつか紹介しま...
前回の記事では、Zabbix のネットワーク検出機能について学習し、アクションと組み合わせてホストの...
1. MySQLデータベースの構成と関連概念まず、MySQL はリレーショナル データベースである...
1. W3C バージョンの flex 2009年版フラグ: display: box; または bo...
Dockerでnginxをデプロイするのはとても簡単ですたった 1 行のコマンド: docker 実...
CEP - 複合イベント処理。ご注文後、一定期間内にお支払いの確認が取れませんでした。タクシーの配...
導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...