キャンバスを使ってカラフルな時計を書いてみよう! 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: Ubuntuソースを追加するルートに切り替える suルートソフトウェアソースファイルの...
WeChat ミニプログラム - QR コード ジェネレーターダウンロード: weapp-qrcod...
目次序文関数のオーバーロードマッピングタイプ部分的、読み取り専用、Null 可能、必須選択、記録除外...
同僚から、LINUX サーバー上の多くのコマンドが (コマンドが見つかりません) というプロンプトで...
重要でないflex-basisテキストオーバーフローに省略記号を追加するという小さな機能に多くの問題...
序文こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。 これは、Google Mat...
今日、入力イベントに関するブログ投稿を見て、気まぐれで関連情報を整理してみました。イベント:関数 c...
目次序文webpack-deb サーバーwebpack-dev-server 起動エラー解決策1解決...
1. 従来のbinlogマスタースレーブレプリケーション、エラー報告をスキップする方法 mysql&...
この記事の例では、jsでテーブルを動的に追加および削除するための具体的なコードを参考までに共有してい...
秘密鍵を開かずにリモート サーバーのデータベースに接続するのは非常に便利です。新しい接続でデータを入...
目次1. NFS-Ganeshaの紹介2. NFS-Ganeshaの設定3. NFS-Ganesha...
bash を終了する場合は、次の 2 つのオプションがあります。最初のもの: Ctrl + d を押...
現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...