HTML5 그리기 시계 animation_html5 튜토리얼 기술

코드 복사

코드는 다음과 같습니다.

var clock=document.getElementById ("시계");
var cxt=clock.getContext("2d");
function drawNow(){
var now=new Date();
var hour=now.getHours( );
var min=now.getMinutes();
var sec=now.getSeconds();
hour=hour>12?hour-12:hour;
hour=hour min/60 ;
//다이얼(파란색)
cxt.lineWidth=10;
cxt.StrokeStyle="blue"
cxt.beginPath();
cxt.arc(250,250,200,0,360,false );
cxt.closePath();
cxt.Stroke();
//규모
//시간 규모
for(var i=0;i<12;i ){
cxt.save();
cxt.lineWidth=7;
cxt.StrokeStyle="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.Stroke();
cxt.restore();
}
//점수
for(var i=0 ;i<60;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.Stroke ();
cxt.restore();
}
//시침
cxt.save();
// 시침 스타일 설정
cxt.lineWidth=7;
cxt.StrokeStyle="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.Stroke();
cxt.restore();
//분침
cxt.save();
cxt.lineWidth=5;
cxt.StrokeStyle="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.strok()
cxt.restore();
//초침
cxt.save();
//초침 스타일 설정
//색상: red
cxt.StrokeStyle="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.Stroke();
//시침, 분침, 초침의 교차점 그리기
cxt.beginPath();
cxt.arc( 0,0,5,0,360,false);
cxt.closePath();
//채우기 설정
cxt.fillStyle="gray";
cxt.fill();
//cxt.StrokeStyle="red";
cxt.Stroke();
//초침의 작은 점을 그립니다.
cxt.beginPath();
cxt.arc(0, -140,5,0,360,false);
cxt.closePath();
//채우기 설정
cxt.fillStyle="gray";
cxt.fill();
//cxt.StrokeStyle="red";
cxt.Stroke();

cxt.restore();

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