댓글 :이 기사는 주로 이동할 수있는 그래픽 HTML5 클럭 예제를 소개합니다. 필요한 친구는 그것을 참조 할 수 있습니다.
HTML5로 시계를 만듭니다
<! doctype html>
<html>
<헤드>
<title> html5 클럭 </title>
</head>
<body>
<canvas id = "canvas"> </canvas> </p> <p> <cript>
var clock = 함수 (캔버스, 옵션) {
this.canvas = 캔버스;
this.ctx = this.canvas.getContext ( "2d");
this.options = 옵션;
}; </p> <p> clock.prototype = {
생성자 : 시계,
DrawCircle : function () {
var ctx = this.ctx;
ctx.strokestyle = "black";
ctx.arc (this.canvas.width / 2, this.canvas.height / 2, 50, 0, 2 * math.pi, false);
ctx.stroke ();
},
Drawnum : function () {
var ctx = this.ctx;
var angle = math.pi * 2 / 12;
for (var i = 1; i <= 12; i += 1) {
ctx.font = "20px 조지아";
ctx.textalign = "센터";
ctx.textBaseline = '중간';
ctx.filltext (String (i), this.canvas.width / 2 + math.cos (3 * math.pi / 2 + angle * i) * 40, this.canvas.height / 2 + math.sin (3 * math.pi / 2 + angle * i) * 40);
}
},
DrawPointer : function () {
var ctx = this.ctx;
var that = this;
var 날짜, 시간, 분, 두 번째;
날짜 = 새 날짜 ();
시간 = date.gethours ();
if (시간> 12) {
시간 = 시간 % 12;
}
minute = date.getMinutes ();
두 번째 = date.getSeconds (); < / p> <p> var b = minute * math.pi / 30;
var c = second * math.pi / 30;
var a = hour * math.pi / 6 + math.pi / 6 * 분 / 60;
var minuteAngle = math.pi * 2 / 3600;
var secondangle = math.pi * 2 / 60;
var HourAgns = Math.pi * 2 / 12 / 3600; < / p> <p> ctx.beginpath ();
ctx.save ();
ctx.translate (that.canvas.width/2, that.canvas.height/2);
ctx.arc (0, 0, 3, 0, 2 * math.pi, false);
ctx.fill ();
ctx.closepath ();
ctx.beginpath ();
a += 아워 앵글;
ctx.rotate (a);
ctx.fillRect (-2, -22, 4, 30);
ctx.closepath ();
ctx.beginpath ();
B += MinuteAngle;
ctx.rotate (b -a);
ctx.fillRect (-1.5, -26, 3, 35);
ctx.closepath ();
ctx.beginpath ();
C += 2 차;
ctx.rotate (c -b);
ctx.fillRect (-1, -30, 2, 40);
ctx.closepath ();
ctx.restore ();
},
Refaint : function () {
this.drawpointer ();
this.drawcircle ();
this.drawnum ();
},
tik : function () {
var that = this;
var ctx = this.ctx;
this.repaint ();
window.timer = setInterval (function () {
ctx.clearrect (0, 0, that.canvas.width, that.canvas.height);
that.repaint ();
}, 1000);
}
}; </p> <p> var 옵션;
var clock = new Clock (document.getElementById ( "canvas"), 옵션);
clock.tik ();
</스크립트>
</body>
</html>
저장 후 브라우저에서 실행하면 움직이는 원형 시계를 볼 수 있습니다. 시도해보십시오