تعليق: الساعة التي تنفذها HTML5Canvas ، يرجى الرجوع إليها
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> html clock </title>
</head>
<body>
<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" ؛
// السمك الثاني
var SecPointWidth = 3 ؛
// طول اليد المستعملة
var SecPointLength = 170 ؛
// لون الطلب
var clockpanelcolor = "#abcdef" ؛
// لون مقياس الاتصال
var scalecolor = "#000" ؛
// طلب العرض على نطاق واسع 3 6 9 12
var ScaleBigWidth = 9 ؛
// طول الحجم الكبير للاتصال الهاتفي
var ScaleBigLength = 15 ؛
// عرض الطلب الصغير
var salesmallwidth = 5 ؛
// طول الطلب الصغير
var salesmalllength = 10 ؛
// لون المركز
var centercolor = 'Red' ؛
// Clock Canvas
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 = العرض ؛
// اضبط لون الفرشاة
p.strokestyle = اللون ؛
// فتح مسار الرسم حديثًا لتجنب التداخل مع المحتوى السابق على لوح Artboard
p.beginpath () ؛
P.Translate (CX ، CY) ؛
//تناوب
P.Rotate (RAN) ؛
// انقل الفرشاة إلى موضع البداية
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+Length ، Starty ، Run ، 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 () ؛
}
نقطة رسم الوظيفة (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؟ Scalebiglenge*1.2: ScaleBigLength ، Scalecolor ، 195-ScaleBiglength ، 0 ، i*30*math.pi/180،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 date = new date () ؛
var sec = date.getSeconds () ؛
var min = date.getMinutes () ؛
var hour = date.gethours () + min/60 ؛
DrawCircle (لوحة ، 7 ، "الأزرق" ، 250،250،200) ؛
DrawScales (لوحة) ؛
Dravhourpoint (لوحة ، ساعة) ؛
DrawMinPoint (لوحة ، دقيقة) ؛
DrawSecpoint (لوحة ، ثانية) ؛
DrawPoint (لوحة ، 1 ، Centercolor ، 250،250،7) ؛
// Drowhorizontalline (لوحة ، 10،10 ، 'Red' ،-5،0،250،250) ؛
}
//drowhorizontalline(panel،7،30،'#f00'،0،0،math.pi،250،250) ؛
DrawClock () ؛
SetInterval (Drowclock ، 1000) ؛
وظيفة حفظ () {
var image = clock.todataurl ("image/png"). استبدال ("Image/PNG" ، "Image/Octet-the-ream") ؛
location.href = Image ؛
}
</script>
</body>
</html>