Aprendi o elemento Canvas no HTML5 antes e, para praticar minhas mãos, percebi um relógio simples. O relógio em si não é complicado e não é embelezado usando imagens. No entanto, embora o pardal seja pequeno, vou compartilhar com você abaixo:
Efeito de demonstração:
Código HTML:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> relógio </title>
<style type = "text/css">
*{
margem: 0;
preenchimento: 0;
}
.tela{
margem-esquerda: 20px;
Margin-top: 20px;
borda: 1px sólido;
}
</style>
</head>
<corpo onload = "main ()">
<canvas class = "canvas" id = "canvasid" width = '500px' altura = '400px'> </canvas>
<script type = "text/javascript" src = "clock.js"> </script>
</body>
</html>
Código JS:
A cópia do código é a seguinte:
var Canvas = {};
Canvas.cxt = document.getElementById ('Canvasid'). GetContext ('2D');
Canvas.Point = function (x, y) {
this.x = x;
this.y = y;
};
/* Apague todos os gráficos na tela*/
Canvas.clearcxt = function () {
var Me = this;
var Canvas = me.cxt.canvas;
me.cxt.clearrect (0,0, canvas.offsetWidth, canvas.offSethEight);
};
/*relógio*/
Canvas.clock = function () {
var me = tela,
c = me.cxt,
raio = 150, /*raio* /
Escala = 20, /*Comprimento da escala* /
Minangle = (1/30)*MATH.PI,/*RAY de um minuto*/
hourangle = (1/6)*math.pi,/*raio de uma hora*/
hourHandLength = Radius/2,/*Hora do comprimento*/
MINHANDLENGENS = RADIUS/3*2,/*MINUTO DO MANDO*/
SecHandLength = Radius/10*9,/*Comprimento da segunda mão*/
centro = novo me.point (c.Canvas.Width/2, c.Canvas.Height/2); /*Centro de círculo*/
/*Desenhe o centro do círculo (centro do mostrador)*/
função dreatCenter () {
C.Save ();
c.Translate (Center.X, Center.Y);
c.fillstyle = 'preto';
C.BeginPath ();
c.arc (0, 0, raio/20, 0, 2*math.pi);
C.ClosePath ();
c.fill ();
c.stroke ();
C.Restore ();
};
/*Desenhe o relógio Face através da transformação de coordenadas*/
Função Drawbackground () {
C.Save ();
c.Translate (Center.X, Center.Y); /*Transformação de tradução*/
/*Draw Scale*/
função drawScale () {
c.Moveto (raio - escala, 0);
c.lineto (raio, 0);
};
C.BeginPath ();
c.arc (0, 0, raio, 0, 2*math.pi, true);
C.ClosePath ();
for (var i = 1; i <= 12; i ++) {
drawScale ();
c.rotate (Hourangle); /*Transformação de rotação*/
};
/*Tempo de desenho (3,6,9,12)*/
C.Font = "Implacamento em negrito de 30px"
C.FillText ("3", 110, 10);
C.FillText ("6", -7, 120);
C.FillText ("9", -120, 10);
c.FillText ("12", -16, -100);
c.stroke ();
C.Restore ();
};
/*Desenhe o ponteiro da hora (H: horário atual (sistema de 24 horas)*/
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 ();
};
/*Desenhe a mão minuciosa (m: minuto atual)*/
this.DrawMInHand = function (M) {
M = M === 0? 60: m;
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 ();
};
/*Desenhe a segunda mão (s: atual segundo)*/
this.DrawSechand = função (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 ();
};
/*Desenhe o relógio com base na hora local*/
this.drawclock = function () {
var Me = this;
função draw () {
var date = new Date ();
Canvas.clearcxt ();
Drawbackground ();
drawCenter ();
me.drawhourhand (date.gethours () + date.getminutes ()/60);
me.DrawMInHand (date.getminutes () + date.getSeconds ()/60);
me.DrawSechand (date.getSeconds ());
}
empate();
setInterval (desenho, 1000);
};
};
var main = function () {
var clock = new Canvas.clock ();
clock.drawclock ();
};
Algumas APIs simples de elemento de tela estão envolvidas no código. Basta fazer uma pausa
O acima é tudo sobre este artigo. Espero que seja útil para todos aprenderem a tela.