Javascript と Canvas を組み合わせて単純な循環時計を実装する_JavaScript スキル

以前、HTML5 の Canvas 要素について学び、練習のために簡単な時計を実装しました。時計自体は複雑ではなく、美化するための写真は使用されていませんが、スズメは小さく、すべての内臓が備わっていますが、以下にそれを共有します。

デモ効果:

HTML コード:

コードをコピーします コードは次のとおりです:

<頭>

JS コード:

コードをコピー コードは次のとおりです:

var Canvas = {};
Canvas.cxt = document.getElementById('canvasId').getContext('2d');
Canvas.Point = function(x, y){
This.x = x;
This.y = y;
};
/*キャンバス上のすべてのグラフィックを消去*/
Canvas.clearCxt = function(){
var me = this;
var Canvas = me.cxt.canvas;
me.cxt.clearRect(0,0, Canvas.offsetWidth, Canvas.offsetHeight);
};
/*時計*/
Canvas.Clock = function(){
var me = キャンバス、
c = me.cxt,
半径 = 150、/*半径*/
スケール = 20, /*スケールの長さ*/
minangle = (1/30)*Math.PI, /*1 分間のラジアン*/
hourangle = (1/6)*Math.PI, /*1 時間の円弧*/
hourHandLength = 半径/2, /*時針の長さ*/
minHandLength = 半径/3*2, /*分針の長さ*/
secHandLength = radius/10*9, /*秒針の長さ*/
center = new me.Point(c.canvas.width/2, c.canvas.height/2); /*円の中心*/
/*円の中心(文字盤の中心)を描画*/
関数drawCenter(){
c.save();
c.translate(center.x, center.y); c.fillStyle = 'black';
c.beginPath();
c.arc(0, 0, radius/20, 0, 2*Math.PI);
c.closePath();
c.fill();
c.ストローク();
c.restore();
};
/*座標変換により文字盤を描画*/
関数drawBackGround(){
c.save();
c.translate(center.x, center.y) /*翻訳変換*/
; /*スケールを描画*/
関数drawScale(){
c.moveTo(半径 - スケール, 0);
c.lineTo(radius, 0); };
c.beginPath();
c.arc(0, 0, radius, 0, 2*Math.PI, true);
c.closePath();
for (var i = 1; i drawScale();
c.rotate(hourangle) /*回転変換*/
};
/*描画時間(3,6,9,12)*/
c.font = "太字 30px インパック"
c.fillText("3", 110, 10);
c.fillText("6", -7, 120);
c.fillText("9", -120, 10);
c.fillText("12", -16, -100);
c.ストローク();
c.restore();
};
/*時針を描画(h:現在時刻(24時間制))*/
This.drawHourHand = function(h){
h = h === 0? 24: h;
c.save();
c.translate(center.x, center.y); c.rotate(3/2*Math.PI);
c.rotate(h*hourangle);
c.beginPath();
c.moveTo(0, 0);
c.lineTo(hourHandLength, 0);
c.ストローク();
c.restore();
};
/*分針を描画します (m: 現在の分)*/
This.drawMinHand = function(m){
m = m === 0? 60: m;
c.save();
c.translate(center.x, center.y); c.rotate(3/2*Math.PI);
c.rotate(m*minangle);
c.beginPath();
c.moveTo(0, 0);
c.lineTo(minHandLength, 0);
c.ストローク();
c.restore();
};
/*秒針を描画(s:現在の秒)*/
This.drawSecHand = 関数{
s = s === 0? 60: s;
c.save();
c.translate(center.x, center.y); c.rotate(3/2*Math.PI);
c.rotate(s*minangle);
c.beginPath();
c.moveTo(0, 0);
c.lineTo(secHandLength, 0);
c.ストローク();
c.restore();
};
/*現地時間に基づいて時計を描画します*/
This.drawClock = function(){
var me = this;
関数draw(){
var date = new Date();
Canvas.clearCxt();
drawBackGround();
drawCenter();
me.drawHourHand(date.getHours() date.getMinutes()/60);
me.drawMinHand(date.getMinutes() date.getSeconds()/60);
me.drawSecHand(date.getSeconds());
}
draw();
setInterval(draw, 1000);
};
};
var main = function(){
var Clock = new Canvas.Clock();
クロック.drawClock();
};

このコードにはいくつかの簡単なキャンバス要素 API が含まれています。試してみてください。

以上がこの記事の全内容です。Canvas を学ぶ皆さんのお役に立てれば幸いです。