コメント:この記事では、主に移動できるグラフィックHTML5クロックの例を紹介します。それを必要とする友達はそれを参照できます。
HTML5で時計を作成します
<!doctype html>
<html>
<head>
<title> html5 clock </title>
</head>
<body>
<canvas id = "canvas"> </canvas> </p> <p> <script>
var clock = function(canvas、options){
this.canvas = canvas;
this.ctx = this.canvas.getContext( "2d");
this.options = 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 georgia";
ctx.textalign = "center";
ctx.textbaseline = 'middle';
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、hour、minute、second;
date = new date();
hour = date.gethours();
if(hour> 12){
hour = hour%12;
}
minute = date.getMinutes();
second = 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 * mink / 60;
var minuteangle = math.pi * 2/3600;
var secondangle = math.pi * 2/60;
var hourangle = 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 += hourangle;
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 += SecondAngle;
ctx.rotate(c -b);
ctx.fillrect(-1、-30、2、40);
ctx.closepath();
ctx.restore();
}、
Repaint: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 options;
var clock = new Clock(document.getElementById( "Canvas")、options);
clock.tik();
</script>
</body>
</html>
保存した後、ブラウザで実行すると、動く円形の時計を見ることができます。試してみてください