Heim >Web-Frontend >H5-Tutorial >HTML5-Programmierpraxis Teil eins – Beispielcode-Sharing für die Implementierung der HTML5-Uhr
HTML5-Programmierpraxis Teil eins – Beispielcode-Sharing für die Implementierung der HTML5-Uhr
- 黄舟Original
- 2017-03-30 13:25:341717Durchsuche
HTML5ProgrammierungPraktischer Kampf Eins – Implementierung Beispielcode-Freigabe der HTML5-Uhr
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>超酷HTML5时钟(作者：http://www.cnblogs.com/jscode/)</title>
<style type="text/css">
.time {
text-align: center;
width:400px;
font-family: "Book Antiqua",Palatino,serif;
font-size: 40px;
font-weight: bold;
text-shadow: 1px 1px 3px #333;
position:absolute;
}
.time em {
background: white;
position: absolute;
top: 5px;
left: 130px;
height: 18px;
width: 140px;
opacity: 0.4;
}
</style>
<script type="text/javascript">
var canvas, context;
function DrawClock() {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
setInterval("drawbackground()", 1000);
} function drawbackground() {
var radius = Math.min(canvas.width / 2, canvas.height / 2) - 15;
var centerx = canvas.width / 2;
var centery = canvas.height / 2;
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.lineWidth = 15;
context.fillStyle = "#EFEFEF";
context.strokeStyle = "#000";
context.beginPath();
context.arc(centerx, centery, radius, 0, Math.PI * 2, 0);
context.fill();
context.stroke();
context.closePath();
context.restore();
for (var i = 0; i < 60; i++) {
context.save();
context.fillStyle = "#EFEFEF";
context.strokeStyle = "#000";
if (i % 5 == 0) {
context.lineWidth = 3;
}
context.beginPath();
context.moveTo(centerx, centery);
context.lineTo(centerx + (radius-6) * Math.cos(i * 6 * Math.PI / 180), centery - (radius-5) * Math.sin(i * 6 * Math.PI / 180));
context.fill();
context.stroke();
context.closePath();
context.restore();
}
context.moveTo(centerx, centery);
context.save();
context.fillStyle = "#EFEFEF";
context.strokeStyle = "#EFEFEF";
context.beginPath();
context.arc(centerx, centery, radius-15, 0, Math.PI * 2, 0);
context.fill();
context.stroke();
context.closePath();
context.restore();
var r = radius - 25;
context.font = "bold 20px 宋体";
Drawtext("1", centerx + (Math.cos(60 * Math.PI / 180) * r), centery - (Math.sin(60 * Math.PI / 180) * r));
Drawtext("2", centerx + (Math.cos(30 * Math.PI / 180) * r), centery - (Math.sin(30 * Math.PI / 180) * r));
Drawtext("3", centerx + (Math.cos(0 * Math.PI / 180) * r), centery - (Math.sin(0 * Math.PI / 180) * r));
Drawtext("4", centerx + (Math.cos(330 * Math.PI / 180) * r), centery - (Math.sin(330 * Math.PI / 180) * r));
Drawtext("5", centerx + (Math.cos(300 * Math.PI / 180) * r), centery - (Math.sin(300 * Math.PI / 180) * r));
Drawtext("6", centerx + (Math.cos(270 * Math.PI / 180) * r), centery - (Math.sin(270 * Math.PI / 180) * r));
Drawtext("7", centerx + (Math.cos(240 * Math.PI / 180) * r), centery - (Math.sin(240 * Math.PI / 180) * r));
Drawtext("8", centerx + (Math.cos(210 * Math.PI / 180) * r), centery - (Math.sin(210 * Math.PI / 180) * r));
Drawtext("9", centerx + (Math.cos(180 * Math.PI / 180) * r), centery - (Math.sin(180 * Math.PI / 180) * r));
Drawtext("10", centerx + (Math.cos(150 * Math.PI / 180) * r), centery - (Math.sin(150 * Math.PI / 180) * r));
Drawtext("11", centerx + (Math.cos(120 * Math.PI / 180) * r), centery - (Math.sin(120 * Math.PI / 180) * r));
Drawtext("12", centerx + (Math.cos(90 * Math.PI / 180) * r), centery - (Math.sin(90 * Math.PI / 180) * r));
context.save();
context.fillStyle="black";
context.beginPath();
context.arc(centerx,centery,10,0,Math.PI*2,0);
context.fill();
context.stroke();
context.closePath();
context.restore();
drawpoint(centerx, centery, radius);
}
function drawpoint(centerx, centery, radius) {
var date = new Date();
var h = date.getHours();
h = h < 13 ? h : h - 12;
var m = date.getMinutes();
var s = date.getSeconds();
var th = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var tm = m < 10 ? "0" + m : m;
var ts = s < 10 ? "0" + s : s;
document.getElementById("currtime").innerHTML = th + ":" + tm + ":" + ts;
var hr = h * 30 * Math.PI / 180 + (m / 60) * 30 * Math.PI / 180 + 90 * Math.PI / 180;
var mr = m * 6 * Math.PI / 180 + s / 60 * 6 * Math.PI / 180 + 90 * Math.PI / 180;
var sr = s * 6 * Math.PI / 180 + 90 * Math.PI / 180;
context.save();
context.lineWidth = 5;
context.fillStyle = "darkgray";
context.strokeStyle = "black";
context.beginPath();
context.moveTo(centerx + 20 * Math.cos(hr), centery + 20 * Math.sin(hr));
context.lineTo(centerx - (radius - 120) * Math.cos(hr), centery - (radius - 120) * Math.sin(hr));
context.moveTo(centerx + 20 * Math.cos(mr), centery + 20 * Math.sin(mr));
context.lineTo(centerx - (radius - 80) * Math.cos(mr), centery - (radius - 80) * Math.sin(mr));
context.moveTo(centerx + 20 * Math.cos(sr), centery + 20 * Math.sin(sr));
context.lineTo(centerx - (radius - 50) * Math.cos(sr), centery - (radius - 50) * Math.sin(sr));
context.closePath();
context.fill();
context.stroke();
context.restore();
}
function Drawtext(text, x, y) {
context.save();
x -= (context.measureText(text).width / 2);
y += 9;
context.beginPath();
context.translate(x, y);
context.fillText(text, 0, 0);
context.restore();
}
window.onload = DrawClock; </script>
</head>
<body>
<h1>超酷HTML5时钟(作者：http://www.cnblogs.com/jscode/)</h1>
<canvas id="canvas" width="400px" height="400px">
</canvas>
<p class="time"><span id="currtime">00:00:00</span>
<em></em>
</p>
</body>
</html>
Erklärung der Methodenfunktion:
DrawClock-Methode ruft Canvas-Kontext ab
Drawbackground-Methode wird hauptsächlich zum Zeichnen verwendet der Hintergrund der Uhr Teile: Rahmen, Text, Markierungen
Drawpoint-Methode wird zum Zeichnen von Stunden-, Minuten- und Sekundenlinien verwendet
Drawtext-Methode wird zum Hinzufügen von Text verwendet
Das obige ist der detaillierte Inhalt vonHTML5-Programmierpraxis Teil eins – Beispielcode-Sharing für die Implementierung der HTML5-Uhr. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Praktischer HTML5 Canvas-Codefall, um einen Feuerwerkseffekt zu erzielenNächster Artikel：Praktischer HTML5 Canvas-Codefall, um einen Feuerwerkseffekt zu erzielen
In Verbindung stehende Artikel
Mehr sehen- Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
- Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
- Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
- Reguläre Ausdrücke und neue HTML5-Elemente
- So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen