Я изучал элемент холста в HTML5 раньше, и для того, чтобы практиковать свои руки, я осознал простые часы. Сами часы не сложны, и они не украшены с использованием картин. Однако, хотя воробей маленький, я поделюсь им с вами ниже:
Демонстрационный эффект:
HTML -код:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> часы </title>
<стиль типа = "text/css">
*{
поля: 0;
Заполнение: 0;
}
.холст{
Полевая левая: 20px;
маржинальная версия: 20px;
Граница: твердый 1px;
}
</style>
</head>
<body onload = "main ()">
<canvas class = "canvas" id = "canvasid" width = '500px' eight = '400px'> </canvas>
<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,
c = me.cxt,
радиус = 150, /*радиус* /
Scale = 20, /*Длина шкалы* /
minangle = (1/30)*math.pi,/*луч в одну минуту*/
hourangle = (1/6)*math.pi,/*Луч один час*/
HourhandLength = RADIUS/2,/*Часовая длина рук*/
minhandlength = radius/3*2,/*минутная длина руки*/
sechandlength = radius/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 ();
};
/*Нарисуйте лицо часами через преобразование координат*/
Функция Delepbackground () {
C.save ();
C.TransLate (Center.X, Center.Y); /*Трансформация перевода*/
/*Нарисуйте шкалу*/
функция transscale () {
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 (Hourangle); /*Преобразование вращения*/
};
/*Время рисования (3,6,9,12)*/
C.font = "Bold 30px Impack"
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: h;
C.save ();
C.TransLate (Center.X, Center.Y);
C. Rotate (3/2*Math.pi);
C. Rotate (H*Hourangle);
c.beginpath ();
C.moveto (0, 0);
C.Lineto (HourhandLength, 0);
C.Stroke ();
C.Restore ();
};
/*Нарисуйте минутную руку (M: текущая минута)*/
this.drawminhand = function (m) {
m = 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: ток второй)*/
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 ();
Deffackground ();
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 ();
};
Некоторые простые API -интерфейсы Canvas Element участвуют в коде. Просто сделай перерыв
Выше всего об этой статье. Я надеюсь, что всем будет полезно изучать холст.