لقد تعلمت عنصر القماش في HTML5 من قبل ، ومن أجل ممارسة يدي ، أدركت ساعة بسيطة. الساعة نفسها ليست معقدة ولا يتم تجميلها باستخدام الصور. ومع ذلك ، على الرغم من أن العصفور صغير ، إلا أنني سأشاركه معك أدناه:
تأثير التوضيح:
رمز HTML:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> الساعة </title>
<type type = "text/css">
*{
الهامش: 0 ؛
الحشو: 0 ؛
}
.Canvas {
الهامش اليساري: 20 بكسل ؛
الهامش: 20 بكسل ؛
الحدود: الصلبة 1px ؛
}
</style>
</head>
<body onload = "main ()">
<canvas class = "canvas" id = "canvasid" width = '500px' height = '400px'> </tanvas>
<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 = هذا ؛
var canvas = me.cxt.canvas ؛
me.cxt.clearrect (0،0 ، canvas.offsetwidth ، canvas.offsetheight) ؛
} ؛
/*ساعة*/
canvas.clock = function () {
var me = canvas ،
ج = me.cxt ،
نصف قطر = 150 ، /*نصف القطر* /
مقياس = 20 ، /*طول المقياس* /
minangle = (1/30)*Math.pi ،/*Ray of One Minute*/
Hourgle = (1/6)*Math.Pi ،/*Ray of One Hour*/
Hourhandlength = نصف قطر/2 ،/*طول اليد ساعة*/
MinHandlength = نصف قطر/3*2 ،/*طول اليد الدقيقة*/
SecHandlength = نصف قطر/10*9 ،/*طول اليد المستعملة*/
Center = new me.point (c.canvas.width/2 ، c.canvas.height/2) ؛ /*مركز الدائرة*/
/*ارسم مركز الدائرة (مركز الاتصال الهاتفي)*/
وظيفة 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 () ؛
} ؛
/*ارسم وجه الساعة من خلال التحول الإحداثي*/
عيب الوظيفة () {
C.Save () ؛
C.Translate (Center.x ، center.y) ؛ /*تحول الترجمة*/
/*رسم مقياس*/
وظيفة drawScale () {
C.Moveto (RADIUS - SCALE ، 0) ؛
C.Lineto (RADIUS ، 0) ؛
} ؛
C.BeginPath () ؛
C.Arc (0 ، 0 ، RADIUS ، 0 ، 2*MATH.PI ، true) ؛
C.Closepath () ؛
لـ (var i = 1 ؛ i <= 12 ؛ i ++) {
DrawScale () ؛
c.rotate (hournangle) ؛ /*تحويل الدوران*/
} ؛
/*وقت الرسم (3،6،9،12)*/
C.Font = "Bold 30px purmack"
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: ح.
C.Save () ؛
C.Translate (Center.x ، center.y) ؛
c.rotate (3/2*Math.pi) ؛
c.rotate (h*hournange) ؛
C.BeginPath () ؛
C.Moveto (0 ، 0) ؛
C.Lineto (Hourhandlength ، 0) ؛
C.stroke () ؛
C.Restore () ؛
} ؛
/*ارسم يد دقيقة (M: الدقيقة الحالية)*/
this.drawMinhand = function (m) {
م = م === 0؟ 60: م ؛
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: Current Second)*/
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 = هذا ؛
وظيفة draw () {
var date = new date () ؛
canvas.clearcxt () ؛
عيب () ؛
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 () ؛
} ؛
بعض واجهات برمجة تطبيقات عنصر القماش البسيط تشارك في الكود. فقط خذ استراحة
ما سبق هو كل شيء عن هذا المقال. آمل أن يكون من المفيد للجميع تعلم القماش.