HTML5 描画時計アニメーション_html5 チュートリアル スキル

コードをコピーします

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

var Clock=document.getElementById ("時計 ");
var cxt=時計.getContext("2d");
functiondrawNow(){
var now=new Date();
varhour=now.getHours( );
var min=now.getMinutes();
var sec=now.getSeconds();
hour=hour>12?hour-12:hour;
hour=hour min/60 ;
//ダイヤル (青)
cxt.lineWidth=10;
cxt.ストロークスタイル="blue"
cxt.beginPath();
cxt.arc(250,250,200,0,360,false );
cxt.closePath();
cxt.ストローク();
//スケール
//時間スケール
for(var i=0;i cxt.save();
cxt.lineWidth=7;
cxt.bottomStyle="black";
cxt.translate(250,250);
cxt.rotate(i*30* Math.PI/180);//回転角*Math.PI/180=ラジアン
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0, - 190);
cxt.closePath();
cxt.ストローク();
cxt.restore();
}
//スコア
for(var i=0 ;i cxt.save();
//サブスケールの太さを設定します
cxt.lineWidth=5;
//キャンバスの原点をリセットします
cxt.translate(250,250);
//回転角度を設定します
cxt.rotate(i*6*Math.PI/180);
//分針の目盛を描画します
cxt.ストロークスタイル = "黒";
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.steroid ();
cxt.restore();
}
// 時針
cxt.save();
// 時針のスタイルを設定します
cxt.lineWidth=7;
cxt.ストロークスタイル="black";
cxt.translate(250,250);
cxt.rotate(hour*30*Math.PI/180);
cxt .beginPath();
cxt .moveTo(0,-140);
cxt.lineTo(0,10);
cxt.closePath();
cxt.ストローク();
cxt.restore();
//分針
cxt.save();
cxt.lineWidth=5;
cxt.ストロークスタイル="black";
//分針を設定します異なる次元の分針キャンバスの中心
cxt .translate(250,250);
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt .moveTo(0,-160);
cxt .lineTo(0,15);
cxt.closePath();
cxt.ストローク()
cxt.restore();
//秒針
cxt.save();
//秒針のスタイルを設定します
//色: 赤
cxt.ストロークスタイル="red";
cxt.lineWidth =3;
//原点をリセットします
cxt.translate (250,250);
//角度を設定します
//cxt.rotate(330*Math.PI/180);
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.ストローク();
//時針、分針、秒針の交点を描画
cxt.beginPath();
cxt.arc( 0,0,5,0,360,false);
cxt.closePath();
//fill を設定します
cxt.fillStyle="gray";
cxt.fill();
//cxt.drawingStyle="red";
cxt.ストローク();
//秒針の小さな点を描画します
cxt.beginPath();
cxt.arc(0, -140,5,0,360,false);
cxt.closePath();
//塗りつぶしを設定します
cxt.fillStyle="gray";
cxt.fill();
//cxt.ストロークスタイル="red";
cxt.ストローク();

cxt.restore();

}
functiondrawClock(){
cxt.clearRect(0,0,500,500);
drawNow();
}
drawNow();
setInterval(drawClock, 1000);