He aprendido el elemento de lona en HTML5 antes, y para practicar mis manos, me di cuenta de un reloj simple. El reloj en sí no es complicado y no se embellece usando imágenes. Sin embargo, aunque el gorrión es pequeño, lo compartiré con usted a continuación:
Efecto de demostración:
Código HTML:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> reloj </title>
<style type = "text/css">
*{
margen: 0;
relleno: 0;
}
.lienzo{
margen-izquierda: 20px;
margen-top: 20px;
borde: sólido 1px;
}
</style>
</ablo>
<Body onload = "main ()">
<Canvas class = "Canvas" id = "CanvasID" width = '500px' Height = '400px'> </ Canvas>
<script type = "text/javaScript" src = "clock.js"> </script>
</body>
</html>
Código JS:
La copia del código es la siguiente:
var lienvas = {};
Canvas.cxt = document.getElementById ('Canvasid'). GetContext ('2d');
Canvas.point = function (x, y) {
this.x = x;
this.y = y;
};
/* Borrar todos los gráficos en lienzo*/
Canvas.cLearCxt = function () {
var me = esto;
var lienvas = me.cxt.canvas;
me.cxt.clearrect (0,0, Canvas.OffSetWidth, Canvas.OffSetheight);
};
/*reloj*/
Canvas.clock = function () {
var me = lienzo,
c = me.cxt,
radio = 150, /*radio* /
escala = 20, /*longitud de escala* /
Minangle = (1/30)*Math.pi,/*rayo de un minuto*/
Hourangle = (1/6)*Math.pi,/*rayo de una hora*/
HourhandLength = Radius/2,/*hora Longitud de la mano*/
minhandlength = radio/3*2,/*minuto de longitud de la mano*/
sechandlength = radio/10*9,/*longitud de segunda mano*/
centro = nuevo me.point (c.canvas.width/2, c.canvas.height/2); /*Centro del círculo*/
/*Dibuja el centro del círculo (centro del dial)*/
function drawCenter () {
C.Save ();
C.Translate (Center.x, Center.y);
C.FillStyle = 'Black';
C.BeginPath ();
c.arc (0, 0, radio/20, 0, 2*math.pi);
ccloSepath ();
C.Fill ();
c.stroke ();
c.restore ();
};
/*Dibuja la cara del reloj a través de la transformación de coordenadas*/
functionenrawbackground () {
C.Save ();
C.Translate (Center.x, Center.y); /*Transformación de traducción*/
/*Dibujar escala*/
function drawScale () {
c.moveto (radio - escala, 0);
C.Lineto (radio, 0);
};
C.BeginPath ();
c.arc (0, 0, radio, 0, 2*math.pi, verdadero);
ccloSepath ();
para (var i = 1; i <= 12; i ++) {
drawScale ();
c.rotate (HourAngle); /*Transformación de rotación*/
};
/*Tiempo de dibujo (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 ();
};
/*Dibuja la mano de la hora (H: hora actual (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 ();
};
/*Dibuja la mano del minuto (m: minuto actual)*/
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 ();
};
/*Dibuja la segunda mano (s: segundo actual)*/
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 ();
};
/*Dibuja el reloj según la hora local*/
this.drawClock = function () {
var me = esto;
function draw () {
var fecha = nueva fecha ();
Canvas.CLearCxt ();
secuenciador ();
DrawCenter ();
me.drawhourhand (date.gethours () + date.getminutes ()/60);
me.drawminhand (date.getminutes () + date.getSeconds ()/60);
me.drawsechand (date.getSeconds ());
}
dibujar();
setInterval (dibujo, 1000);
};
};
var main = function () {
var clock = new Canvas.Clock ();
clock.DrawClock ();
};
Algunas API de elementos de lona simples están involucradas en el código. Solo toma un descanso
Lo anterior se trata de este artículo. Espero que sea útil para todos aprender lienzo.