私は以前にHTML5のキャンバス要素を学びました、そして、私の手を練習するために、私は簡単な時計に気付きました。時計自体は複雑ではなく、写真を使用して美化されていません。ただし、スズメは小さいですが、以下でそれを共有します。
デモンストレーション効果：
HTMLコード：
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> clock </title>
<style type = "text/css">
*{
マージン：0;
パディング：0;
}
。キャンバス{
マージン左：20px;
マージントップ：20px;
ボーダー：ソリッド1px;
}
</style>
</head>
<body onload = "main（）">
<canvas class = "canvas" id = "canvasid" width = '500px' height = '400px'> </canvas>
<script type = "text/javascript" src = "clock.js"> </script>
</body>
</html>
JSコード：
コードコピーは次のとおりです。
var canvas = {};
canvas.cxt = document.getElementById（ 'canvasid'）。getContext（ '2d'）;
canvas.point = function（x、y）{
this.x = x;
this.y = y;
};
/*キャンバスのすべてのグラフィックを消去*/
canvas.clearcxt = function（）{
var me = this;
var canvas = me.cxt.canvas;
me.cxt.clearrect（0,0、canvas.offsetwidth、canvas.offsetheight）;
};
/*クロック*/
canvas.clock = function（）{
var me = canvas、
c = me.cxt、
radius = 150、 /*radius* /
スケール= 20、 /*スケール長* /
MinAngle =（1/30）*Math.pi、/*1分のレイ*/
hourangle =（1/6）*math.pi、/*1時間のレイ*/
hourhandlength = radius/2、/*hour Hand Length*/
minhandlength = radius/3*2、/*微細な手の長*/
sechandlength = radius/10*9、/*秒手長*/
center = new me.point（c.canvas.width/2、c.canvas.height/2）; /*円の中心*/
/*円の中心を描く（ダイヤルの中心）*/
function drawcenter（）{
c.save（）;
c.Translate（center.x、center.y）;
c.fillstyle = 'black';
C.BeginPath（）;
c.arc（0、0、radius/20、0、2*math.pi）;
C.ClosePath（）;
c.fill（）;
C.Stroke（）;
c.restore（）;
};
/*座標変換を通して時計の顔を描く*/
関数dockbackground（）{
c.save（）;
c.Translate（center.x、center.y）; /*翻訳変換*/
/*スケールを描く*/
関数drawscale（）{
c.moveto（radius-スケール、0）;
c.lineto（radius、0）;
};
C.BeginPath（）;
c.arc（0、0、radius、0、2*math.pi、true）;
C.ClosePath（）;
for（var i = 1; i <= 12; i ++）{
drawscale（）;
c.rotate（hournal）; /*回転変換*/
};
/*描画時間（3,6,9,12）*/
C.Font = "Bold30pxImpack"
C.FillText（ "3"、110、10）;
C.FillText（ "6"、-7、120）;
C.FillText（ "9"、-120、10）;
C.FillText（ "12"、-16、-100）;
C.Stroke（）;
c.restore（）;
};
/*時間を描く（H：現在の時刻（24時間システム）*/
this.drawhourhand = function（h）{
h = h === 0？ 24：H;
c.save（）;
c.Translate（center.x、center.y）;
c.rotate（3/2*math.pi）;
c.rotate（h*hourangle）;
C.BeginPath（）;
C.Moveto（0、0）;
c.lineto（hourhandlength、0）;
C.Stroke（）;
c.restore（）;
};
/*分を描く（M：現在の分）*/
this.drawminhand = function（m）{
m = m === 0？ 60：m;
c.save（）;
c.Translate（center.x、center.y）;
c.rotate（3/2*math.pi）;
c.rotate（m*minangle）;
C.BeginPath（）;
C.Moveto（0、0）;
c.lineto（minhandlength、0）;
C.Stroke（）;
c.restore（）;
};
/*秒針を描く（s：現在の秒）*/
this.drawsechand = function（s）{
s = s === 0？ 60：s;
c.save（）;
c.Translate（center.x、center.y）;
c.rotate（3/2*math.pi）;
c.rotate（s*minangle）;
C.BeginPath（）;
C.Moveto（0、0）;
c.lineto（sechandlength、0）;
C.Stroke（）;
c.restore（）;
};
/*現地時間に基づいて時計を描画*/
this.drawclock = function（）{
var me = this;
関数draw（）{
var date = new Date（）;
canvas.clearcxt（）;
dockbackground（）;
drawcenter（）;
me.drawhourhand（date.gethours（） + date.getMinutes（）/60）;
me.drawminhand（date.getMinutes（） + date.getSeconds（）/60）;
me.drawsechand（date.getSeconds（））;
}
描く（）;
setinterval（draw、1000）;
};
};
var main = function（）{
var clock = new canvas.clock（）;
clock.drawclock（）;
};
いくつかの単純なキャンバス要素APIがコードに関与しています。休憩してください
上記はこの記事に関するすべてです。キャンバスを学ぶことは誰にとっても役立つことを願っています。