jsはキャンバスに基づいて時計コンポーネントを実装します

圧縮アップロード画像、スクラッチカード、ポスター作成、チャートプラグインなど、フロントエンド開発において、キャンバスはグラフィック描画に欠かせないタグ要素となっています。面接の過程で、キャンバスグラフィック描画に触れたことがあるかどうか、多くの人に尋ねられます。

意味

キャンバス要素は、スクリプト (通常は JavaScript) を通じてグラフィックスを描画するために使用されます。
キャンバスタグは単なるグラフィックコンテナーなので、グラフィックを描画するにはスクリプトを使用する必要があります。

ブラウザのサポート

Internet Explorer 9、Firefox、Opera、Chrome、Safari をサポート

この記事では、キャンバス API に慣れるために時計コンポーネントを使用します。

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8" />
<title>キャンバス時計</title>
<スタイル>
*{マージン:0;パディング:0;}
本文{text-align:center;padding-top:100px;}
</スタイル>
</head>
<本文>
<canvas id="時計" 幅="200px" 高さ="200px"></canvas>
<スクリプト>
(関数 (win) {
	関数DrawClock(オプション){
		this.canvas = オプション.el;
		this.ctx = this.canvas.getContext('2d'); // メソッドはキャンバスに描画するための環境を返します this.width = this.ctx.canvas.width;
		this.height = this.ctx.canvas.height;
		this.r = this.width / 2;
		this.rem = this.width / 200;
		this.digits = [3、4、5、6、7、8、9、10、11、12、1、2];

	  var self = this;
	  自己初期化();
	  setInterval(関数(){
	  	自己初期化();
	  }, 1000);
	}

	DrawClock.prototype = {
		初期化: 関数(){
			var ctx = this.ctx;
			ctx.clearRect(0, 0, this.width, this.height); //指定された四角形内の指定されたピクセルをクリアします。var now = new Date();
			var hours = now.getHours();
			var minutes = now.getMinutes();
			var 秒 = now.getSeconds();

			var hour = hours >= 12 ? hours - 12 : hours;
			var minute = 分 + 秒 / 60;

			背景を描画します。
			this.drawHour(時間、分);
			this.drawMinute(分);
			this.drawSecond(秒);
			ドットを描画します。
			ctx.restore();
		},
		背景を描画: 関数(){
			var ctx = this.ctx;
			var self = this;
			ctx.save();
			ctx.translate(this.r, this.r); //キャンバス上の (0,0) 位置を再マップします ctx.beginPath();
			ctx.lineWidth = 8 * this.rem;
			ctx.arc(0, 0, this.r - ctx.lineWidth / 2, 0, 2 * Math.PI, false); //円弧/曲線を作成します（円または部分円を作成するために使用します）
			ctx.stroke();
			ctx.font = 16 * this.rem + "px Arial"; //テキストコンテンツの現在のフォントプロパティを設定または返します ctx.textAlign = "center"; //テキストコンテンツの現在の配置を設定または返します ctx.textBaseline = "middle"; //テキストを描画するときに使用する現在のテキストベースラインを設定または返します this.digits.forEach(function(number, i){
				var rad = 2 * Math.PI / 12 * i;
				var x = Math.cos(rad) * (self.r - 33 * self.rem);
				var y = Math.sin(rad) * (self.r - 33 * self.rem);
				ctx.fillText(number, x, y); // キャンバスに「塗りつぶされた」テキストを描画します });

			//分目盛り、1分あたり6度
			(var i = 0; i < 60; i++){
				ctx.save(); //現在の環境の状態を保存します ctx.rotate(6 * i * Math.PI / 180); //現在の描画を回転します ctx.beginPath(); //パスを開始するか、現在のパスをリセットします ctx.moveTo(0, -82 * this.rem); //線を作成せずに、キャンバス内の指定されたポイントにパスを移動します ctx.lineTo(0, -87 * this.rem); //新しいポイントを追加し、そのポイントからキャンバス内の最後の指定されたポイントまで線を作成します ctx.closePath(); //現在のポイントから開始ポイントに戻るパスを作成します ctx.strokeStyle = '#000'; //ストロークに使用される色、グラデーション、またはモードを設定するか返します ctx.lineWidth = 1 * this.rem; //現在の線の幅を設定するか返します ctx.stroke(); //定義されたパスを描画します ctx.restore(); //以前に保存したパスの状態とプロパティを返します }
			//時間スケール、1時間ごとに30度回転
			(var i = 0; i < 12; i++){
				ctx.save();
				ctx.rotate(30 * i * Math.PI / 180);
				ctx.beginPath();
				ctx.moveTo(0, -79 * this.rem);
				ctx.lineTo(0, -87 * this.rem);
				ctx.closePath();
				ctx.strokeStyle = '#000';
				ctx.lineWidth = 2 * this.rem;
				ctx.stroke();
				ctx.restore();
			}
		},
		drawHour: 関数(時間、分){
			var ctx = this.ctx;
			ctx.save();
			ctx.beginPath();
			var hRad = 2 * Math.PI / 12 * 時間;
			var mRad = 2 * Math.PI / 12 / 60 * 分;
			ctx.rotate(hRad + mRad);
			ctx.lineWidth = 6 * this.rem;
			ctx.lineCap = "round"; // 線の終点のスタイルを設定または返します ctx.moveTo(0, 10 * this.rem);
			ctx.lineTo(0, -this.r / 2);
			ctx.stroke();
			ctx.restore();
		},
		drawMinute: 関数(分){
			var ctx = this.ctx;
			ctx.save();
			ctx.beginPath();
			var rad = 2 * Math.PI / 60 * 分;
			ctx.rotate(rad);
			ctx.lineWidth = 3 * this.rem;
			ctx.lineCap = "丸い";
			ctx.moveTo(0, 10 * this.rem);
			ctx.lineTo(0, -this.r + 26 * this.rem);
			ctx.stroke();
			ctx.restore();
		},
		drawSecond: 関数(second){
			var ctx = this.ctx;
			ctx.save();
			ctx.beginPath();
			ctx.fillStyle = "#c14543";
			var rad = 2 * Math.PI / 60 * 秒;
			ctx.rotate(rad);
			ctx.moveTo(-3 * this.rem、20 * this.rem);
			ctx.lineTo(3 * this.rem、20 * this.rem);
			ctx.lineTo(1, -this.r + 26 * this.rem);
			ctx.lineTo(-1, -this.r + 26 * this.rem);
			ctx.fill(); //現在の描画（パス）を塗りつぶす
			ctx.restore();
		},
		drawDot: 関数(分){
			var ctx = this.ctx;
			ctx.beginPath();
			ctx.fillStyle = "#fff";
			ctx.arc(0, 0, 3 * this.rem, 0, 2 * Math.PI, false);
			ctx.fill();
		}
	};

    win.DrawClock = DrawClock;
}）（ウィンドウ）;

新しい DrawClock({el: document.getElementById("clock")});
</スクリプト>
</本文>
</html>

心に丘と谷があれば、2エーカーの土地を耕作することができます。キャンバスクロックは、キャンバス内のほとんどの API を使用します。キャンバスクロックのコード実装を学習することで、キャンバスの特性とメソッドを理解できます。同時に、クロック効果を実現する際には、数学における正弦、余弦、ラジアンの計算方法の幾何学モデルが使用され、昔数学を学習した楽しさが再現されます。一石二鳥と言えるでしょう。

クロック効果図は次のとおりです。