コメント：この記事では、主に移動できるグラフィック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>
保存した後、ブラウザで実行すると、動く円形の時計を見ることができます。試してみてください