JavaScript キャンバステキストクロック

この記事では、テキストクロックを実装するためのキャンバスの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

まずはレンダリングを見てみましょう

コード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <meta http-equiv="X-UA-compatible" content="ie=edge">
 <title>ドキュメント</title>
</head>
<本文>
 <canvas id="myCanvas" width="600" height="600">お使いのブラウザはキャンバスをサポートしていません</canvas>
<スクリプト>
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 ctx.translate(300,300);

 関数 Clock(ctx){
 ctx = ctx。 numbertext = ['zero'、 'one'、 'two'、 '3'、 'four'、 'five'、 'six'、 '"8、' 'nine'、 'ten'、 'twelve'、 'thirteen'、 'fourteen'、 '15'、 '' 'theventeen' '' twenteen '、' twenteen、 wo '、' twredee '、' twour '、' twenty ''、 'twenty' '、' twenty-ven '、' twenty-eight '、' twenty-nine '、' thirty '、' thir1-one ']; 
 this.H=['0時','1時','2時','3時','4時','5時','6時','7時','8時','9時','10時','11時','12時','13時','14時','15時','16時','17時','18時','19時','20時','21時','22時'];
 : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
 : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
 
 this.draw = 関数(){
  this.ctx.clearRect(-300,-300,600,600);
  // 中央に小さな黒い円 this.ctx.beginPath();
  this.ctx.arc(0,0,5,0,Math.PI*2,true);
  this.ctx.fill();
  this.ctx.closePath();
  // 長い水平線を描画します this.ctx.beginPath();
  this.ctx.moveTo(0,0);
  ctx の行を 280 にします。
  this.ctx.strokeStyle='#000';
  this.ctx.stroke();
  this.ctx.beginPath();
  this.ctx.font='12px Microsoft YaHei';
  var yearText = '';
  var arr = String(this.year).split('');
  (var n=0;n<arr.length;n++){
  var num = Number(arr[n]);
  yearText += this.numberText[num];
  }
  var weekday = this.day === 0 ? 'Sunday': 'week'+this.numberText[this.day]; // 週 var moText = this.numberText[this.mon]+'month'+ this.numberText[this.da]+'day';
  this.ctx.fillText(yearText+'年',10,-10); // 年テキスト this.ctx.fillText(moText,10,20); // 月/日/週テキスト this.ctx.fillText(weekday,10,40); // 月/日/週テキスト this.drawClock();
 }
 // スケールを描画する this.drawClock = function(){
  // 時計 this.ctx.save(); // 現在の状態を保存します this.ctx.rotate(Math.PI / 12 * this.h);
  (var j=0; j < 24; j++){
  this.ctx.beginPath();
  var color = j === this.h ? '#000': '#ccc';
  this.ctx.strokeStyle = 色;
  this.ctx.font='12px Microsoft YaHei';
  this.ctx.strokeText(this.H[j],110,-5);
  this.ctx.closePath();
  this.ctx.rotate(-Math.PI / 12);
  }
  this.ctx.restore(); // 最後の状態に復元 // 分 this.ctx.save(); 
  this.ctx.rotate(Math.PI / 30 * this.m);
  (var i=0; i < 60; i++){
  this.ctx.beginPath();
  var color = i === this.m ? '#000': '#ccc';
  this.ctx.strokeStyle = 色;
  this.ctx.strokeText(this.M[i],170,-5);
  this.ctx.closePath();
  this.ctx.rotate(-Math.PI / 30);
  }
  this.ctx.restore();
  

  // 秒 this.ctx.save();
  this.ctx.rotate(Math.PI / 30 * this.s);
  (var k=0; k < 60; k++){
  this.ctx.beginPath();
  var color = k === this.s ? '#000': '#ccc';
  this.ctx.strokeStyle = 色;
  this.ctx.strokeText(this.S[k],230,-5);
  this.ctx.closePath();
  this.ctx.rotate(-Math.PI / 30);
  }
  this.ctx.restore();
  // ctx.rotate(-Math.PI / 30 * this.s);
 }
 // 初期化 this.init = function(){
  var that = this;
  this.timer = setInterval(関数(){
  その.setTime();
  that.draw();
  },100);
 }
 // 停止 this.stop = function(){
  タイマー間隔をクリアします。
  this.timer = null;
 }
 // 時間を設定する this.setTime = function(){
  var date = 新しい Date();
  this.year = date.getFullYear(); // 年、int
  this.mon = date.getMonth()+1; // 月、int
  this.da = date.getDate(); // 日付、int
  this.day = date.getDay(); // 曜日、int


  var hour = date.getHours(); // 時間、int
  var minu = date.getMinutes(); // 分、int
  var sec = date.getSeconds(); // 秒、int
  
 // ミリ秒/1000、主にフレームアニメーション用 var minuScond = date.getMilliseconds()/1000;

  var second; // 秒、秒の回転角度を計算する、float
  var minute; // 分、分の角度を計算する、float
  var ho; // 時間、時間の角度を計算します、float

  if(minuScond > 0.8){
  秒 = Math.ceil(sec + minuScond);
  秒 = 秒 >= 60? 0:秒;
  } それ以外 {
  秒 = sec + minuScond;
  }
  // 秒が59に達したら、分が遷移する if (sec === 59) {
  if(minuScond >= 0.8){
   分 = Math.ceil(minu + minuScond);
   分 = 分 >=60 ? 0: 分;
  } それ以外{
   分 = minu + minuScond;
  }
  } それ以外{
  分 = minu;
  }
  // 秒と分が 59 に達したので、時針を遷移させる必要があります if (sec === 59 && minu===59) {
  if(minuScond >= 0.8){
   ho = Math.ceil(hour + minuScond);
   ho = ho >=24 ? 0: ho;
  } それ以外{
   ho = 時間 + minuScond;
  }
  } それ以外{
  ho = 時間;
  }
  this.h = ho; // 時間 this.m = minute; // 分 this.s = second; // 秒 }
 }
 var clock = new Clock(ctx);
 クロックを初期化します。
</スクリプト>
</本文>
</html>

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

以下もご興味があるかもしれません: