コメント:html5canvasによって実装された時計、それを参照してください
<!doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title> html clock </title>
</head>
<body>
<canvas>
ブラウザはCanvasタグをサポートせず、時間の手を表示できません!
</canvas>
<script type = "text/javascript">
//キャンバスの背景色
var clockbackgroundcolor = "#abcdef";
//時間の手の色
var hourpointcolor = "#000";
//時間の手の厚さ
var hourpointwidth = 7;
//時間の長さ
var hourpointlength = 100;
//微細な手の色
var minpointcolor = "#000";
//分の厚さ
var minpointwidth = 5;
//微細な手の長さ
var minpointlength = 150;
//秒針
var secpointcolor = "#f00";
// 2番目の厚さ
var secpointwidth = 3;
//秒針の長さ
var secpointlength = 170;
//色をダイヤルします
var clockpanelcolor = "#abcdef";
//スケールの色をダイヤルします
var scalecolor = "#000";
//大規模な幅3 6 9 12をダイヤルします
var scalebigwidth = 9;
//ダイヤルの大規模の長さ
var scalebiglength = 15;
//ダイヤルの幅小規模
var scalesmallwidth = 5;
//ダイヤルの長さは小規模です
var scalesmalllength = 10;
//センターカラー
var centercolor = 'red';
//クロックキャンバス
var clock = document.getElementById( 'clock');
clock.style.background = clockbackgroundcolor;
//時間の手のキャンバスの描画環境(塗装板)
var panel = clock.getContext( '2d');
//行を描画します
/**
*ラインセグメントを描画します
*
*
*/
関数の描画(P、幅、色、startx、starty、endx、endy、ran、cx、cy){
//着信アートボードを保存します。これは、描画するたびに新しいレイヤーを開くのと同じです
p.save();
//ブラシ幅を設定します
p.linewidth = width;
//ブラシの色を設定します
P.Strokestyle = color;
//アートボード上の以前のコンテンツとの干渉を避けるために、描画パスを新しく開きました
P.BeginPath();
p.translate(cx、cy);
//回転
p.rotate(ran);
//ブラシを開始位置に移動します
p.moveto(startx、starty);
//ブラシをエンド位置に移動します
P.lineto(Endx、Endy);
//線図操作
P.Stroke();
//後でアートボードに描かれたコンテンツとの干渉を避けるために、描画パスを閉じます
P.ClosePath();
//着信アートボードオブジェクトのレイヤーをオーバーレイします
p.Restore();
}
/**
*水平線を描きます
*/
関数drawhorizontalline(p、幅、長さ、色、startx、starty、ran、cx、cy){
ドローライン(p、幅、色、startx、starty、startx+length、starty、ran、cx、cy);
}
/**
*円を描きます
*/
関数DrawCircle(P、幅、色、Centrex、Centrey、R){
p.save();
//ブラシ幅を設定します
p.linewidth = width;
//ブラシの色を設定します
P.Strokestyle = color;
//アートボード上の以前のコンテンツとの干渉を避けるために、描画パスを新しく開きました
P.BeginPath();
//円を描きます
P.ARC(Centrex、Centrey、R、0,360、False);
//線図操作
P.Stroke();
//後でアートボードに描かれたコンテンツとの干渉を避けるために、描画パスを閉じます
P.ClosePath();
//着信アートボードオブジェクトのレイヤーをオーバーレイします
p.Restore();
}
関数ドローポイント(P、幅、色、センターリックス、センター、r){
p.save();
//ブラシ幅を設定します
p.linewidth = width;
//ブラシの色を設定します
p.fillstyle = color;
//アートボード上の以前のコンテンツとの干渉を避けるために、描画パスを新しく開きました
P.BeginPath();
//円を描きます
P.ARC(Centrex、Centrey、R、0,360、False);
//線図操作
p.fill();
//後でアートボードに描かれたコンテンツとの干渉を避けるために、描画パスを閉じます
P.ClosePath();
//着信アートボードオブジェクトのレイヤーをオーバーレイします
p.Restore();
}
関数ドロースケール(P){
//小規模を描きます
for(var i = 0; i <60; i ++){
drawhorizontalline(p、scalesmallwidth、scalesmalllength、scalecolor、195-scalesmalllength、0、i*6*math.pi/180,250,250);
}
//大規模に描画します
for(var i = 0; i <12; i ++){
drawhorizontalline(p、i%3 == 0?scalebigwidth*1.2:scalebigwidth、i%3 == 0?scalebiglength*1.2:scalebiglength、scalecolor、195-scalebiglength、0、i*30*math.pi/180,250,250);
//デジタルスケールを追加できます
}
}
関数drawhourpoint(p、hour){
drawhorizontalline(p、hourpointwidth、hourpointlength、hourpointcolor、-10,0、(hour-3)*30*math.pi/180,250,250);
}
関数drawminpoint(p、min){
Drawhorizontalline(P、MinPointWidth、MinPointLength、MinPointColor、-15,0、(Min-15)*6*Math.Pi/180,250,250);
}
関数drawsecpoint(p、sec){
Drawhorizontalline(P、SecPointWidth、secopitelength、secpointcolor、-15,0、(sec-15)*6*math.pi/180,250,250);
}
関数drawclock(){
Panel.ClearRect(0,0,500,500);
panel.filltext( ""、10,20);
panel.filltext( "<a href =" http://www.vevb.com "、10,40"> "、10,40 </a>);
var date = new Date();
var sec = date.getSeconds();
var min = date.getMinutes();
var hour = date.gethours() + min/60;
DrawCircle(パネル、7、blue '、250,250,200);
ドロースケール(パネル);
drawhourpoint(パネル、時間);
DrawMinPoint(パネル、Min);
Drawsecpoint(Panel、sec);
DrawPoint(パネル、1、CenterColor、250,250,7);
// drowhorizontalline(パネル、10,10、 'red'、-5,0,0,250,250);
}
//DROWHORIZONTALLINE(Panel,7,30,'#f00',0,0,0,0,0,0,0,0,250);
drawclock();
setinterval(drowclock、1000);
function save(){
var image = clock.todataurl( "image/png")。
location.href = image;
}
</script>
</body>
</html>