ความคิดเห็น: นาฬิกาที่ใช้โดย HTML5CANVAS โปรดดูที่มัน
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> นาฬิกา HTML </title>
</head>
<body>
<Canvas>
เบราว์เซอร์ของคุณไม่รองรับแท็ก Canvas และไม่สามารถแสดงมือชั่วโมง!
</sanvas>
<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";
// ความหนาที่สอง
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 = 'สีแดง';
// นาฬิกาผ้าใบ
var clock = document.getElementById ('นาฬิกา');
clock.style.background = clockbackgroundcolor;
// สภาพแวดล้อมการวาดของผ้าใบมือชั่วโมง (Paintboard)
var panel = clock.getContext ('2d');
// วาดเส้น
-
*วาดส่วนบรรทัด
-
-
-
ฟังก์ชั่น drawline (p, ความกว้าง, สี, startx, starty, endx, endy, ran, cx, cy) {
// บันทึก Artboard ที่เข้ามาซึ่งเทียบเท่ากับการเปิดเลเยอร์ใหม่ทุกครั้งที่คุณวาด
P.Save ();
// ตั้งค่าความกว้างของแปรง
p.lineWidth = ความกว้าง;
// ตั้งค่าสีแปรง
P.Strokestyle = สี;
// เปิดเส้นทางการวาดใหม่เพื่อหลีกเลี่ยงการรบกวนด้วยเนื้อหาก่อนหน้าบน artboard
P.BeginPath ();
P.Translate (CX, CY);
// การหมุน
p.rotate (วิ่ง);
// เลื่อนแปรงไปยังตำแหน่งเริ่มต้น
P.MoveTo (startx, starty);
// เลื่อนแปรงไปยังตำแหน่งท้าย
p.lineto (endx, endy);
// การดำเนินการวาดเส้น
p.stroke ();
// ปิดเส้นทางการวาดเพื่อหลีกเลี่ยงการรบกวนด้วยเนื้อหาที่วาดบน artboard ในภายหลัง
p.closepath ();
// ซ้อนเลเยอร์บนวัตถุ Artboard ที่เข้ามา
P.Restore ();
-
-
*วาดเส้นแนวนอน
-
ฟังก์ชั่น drawhorizontalline (p, ความกว้าง, ความยาว, สี, startx, starty, ran, cx, cy) {
drawline (p, ความกว้าง, สี, startx, starty, startx+ความยาว, starty, ran, cx, cy);
-
-
*วาดวงกลม
-
ฟังก์ชั่น drawcircle (p, ความกว้าง, สี, centrex, centrey, r) {
P.Save ();
// ตั้งค่าความกว้างของแปรง
p.lineWidth = ความกว้าง;
// ตั้งค่าสีแปรง
P.Strokestyle = สี;
// เปิดเส้นทางการวาดใหม่เพื่อหลีกเลี่ยงการรบกวนด้วยเนื้อหาก่อนหน้าบน artboard
P.BeginPath ();
// วาดวงกลม
P.ARC (Centrex, Centrey, R, 0,360, FALSE);
// การดำเนินการวาดเส้น
p.stroke ();
// ปิดเส้นทางการวาดเพื่อหลีกเลี่ยงการรบกวนด้วยเนื้อหาที่วาดบน artboard ในภายหลัง
p.closepath ();
// ซ้อนเลเยอร์บนวัตถุ Artboard ที่เข้ามา
P.Restore ();
-
ฟังก์ชั่น DrawPoint (P, ความกว้าง, สี, centrex, centrey, r) {
P.Save ();
// ตั้งค่าความกว้างของแปรง
p.lineWidth = ความกว้าง;
// ตั้งค่าสีแปรง
p.fillstyle = สี;
// เปิดเส้นทางการวาดใหม่เพื่อหลีกเลี่ยงการรบกวนด้วยเนื้อหาก่อนหน้าบน artboard
P.BeginPath ();
// วาดวงกลม
P.ARC (Centrex, Centrey, R, 0,360, FALSE);
// การดำเนินการวาดเส้น
p.fill ();
// ปิดเส้นทางการวาดเพื่อหลีกเลี่ยงการรบกวนด้วยเนื้อหาที่วาดบน artboard ในภายหลัง
p.closepath ();
// ซ้อนเลเยอร์บนวัตถุ Artboard ที่เข้ามา
P.Restore ();
-
ฟังก์ชั่น drawscales (p) {
// วาดขนาดเล็ก
สำหรับ (var i = 0; i <60; i ++) {
Drawhorizontalline (P, Scalesmallwidth, Scalesmalllength, Scalecolor, 195-Scalesmalllength, 0, I*6*Math.pi/180,250,250);
-
// วาดขนาดใหญ่
สำหรับ (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,250);
// คุณสามารถเพิ่มเครื่องชั่งดิจิตอล
-
-
ฟังก์ชั่น drawhourpoint (p, ชั่วโมง) {
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, secpointlength, 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 = วันที่ใหม่ ();
var sec = date.getSeconds ();
var min = date.getMinutes ();
var hour = date.getHours () + min/60;
Drawcircle (แผง, 7, 'Blue', 250,250,200);
drawscales (แผง);
Drawhourpoint (แผงควบคุมชั่วโมง);
drawminpoint (แผง, min);
DrawSecPoint (Panel, Sec);
จุดด่าง (แผง, 1, centercolor, 250,250,7);
// Drowhorizontalline (แผง, 10,10, 'สีแดง',-5,0,0,250,250);
-
//drowhorizontalline(panel,7,30,30,'#f00',0,0,0,0,250,250);
DrawClock ();
setInterval (DrowClock, 1,000);
ฟังก์ชั่นบันทึก () {
var image = clock.todataurl ("image/png") แทนที่ ("image/png", "image/octet-stream");
location.href = image;
-
</script>
</body>
</html>