J'ai déjà appris l'élément de toile dans HTML5, et pour pratiquer mes mains, j'ai réalisé une simple horloge. L'horloge elle-même n'est pas compliquée et il n'est pas embelli en utilisant des images. Cependant, bien que le moineau soit petit, je le partagerai avec vous ci-dessous:
Effet de démonstration:
Code html:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Corloge </Title>
<style type = "text / css">
* {
marge: 0;
rembourrage: 0;
}
.toile{
marge-gauche: 20px;
marge: 20px;
Border: solide 1px;
}
</ style>
</ head>
<body onload = "main ()">
<canvas class = "canvas" id = "canvasid" width = '500px' height = '400px'> </ canvas>
<script type = "text / javascript" src = "horloge.js"> </ script>
</docy>
</html>
Code js:
La copie de code est la suivante:
var canvas = {};
Canvas.cxt = document.getElementById ('canvasid'). GetContext ('2d');
Canvas.point = fonction (x, y) {
this.x = x;
this.y = y;
};
/ * Effacer tous les graphiques sur toile * /
Canvas.clearcxt = function () {
var me = ceci;
var canvas = me.cxt.canvas;
me.cxt.clearrect (0,0, canvas.offsetwidth, canvas.offsetheight);
};
/*horloge*/
Canvas.clock = function () {
var me = toile,
c = me.cxt,
rayon = 150, / * rayon * /
échelle = 20, / * longueur d'échelle * /
minangle = (1/30) * math.pi, / * rayon d'une minute * /
hourangle = (1/6) * math.pi, / * rayon d'une heure * /
hourhandlength = rayon / 2, / * heure de la longueur de la main * /
minHandLength = Radius / 3 * 2, / * longueur de main à minute * /
sechandlength = radius / 10 * 9, / * longueur de seconde main * /
Centre = new me.point (c.Canvas.width / 2, c.Canvas.height / 2); / * Centre de cercle * /
/ * Dessinez le centre du cercle (centre du cadran) * /
fonction drawCenter () {
c.save ();
C.Translate (Centre.x, Centre.Y);
C.FillStyle = 'Black';
C.BeginPath ();
c.arc (0, 0, rayon / 20, 0, 2 * math.pi);
C.ClosePath ();
c.fill ();
C.Stroke ();
C.Restore ();
};
/ * Dessinez le visage de la montre par la transformation des coordonnées * /
fonction daponomaire () {
c.save ();
C.Translate (Centre.x, Centre.Y); / * Transformation de traduction * /
/ * Dessiner une échelle * /
fonction drawscale () {
c.moveto (rayon - échelle, 0);
C.lineto (Radius, 0);
};
C.BeginPath ();
c.arc (0, 0, rayon, 0, 2 * math.pi, true);
C.ClosePath ();
pour (var i = 1; i <= 12; i ++) {
DrawScale ();
c.rotate (hourangle); / * Transformation de rotation * /
};
/ * Temps de dessin (3,6,9,12) * /
c.font = "Impack gras 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 ();
};
/ * Dessiner la main de l'heure (H: heure actuelle (système 24h / 24) * /
this.drawhourhand = fonction (h) {
h = h === 0? 24: H;
c.save ();
C.Translate (Centre.x, Centre.Y);
c.rotate (3/2 * math.pi);
c.rotate (h * hourangle);
C.BeginPath ();
c.moveto (0, 0);
C.lineto (houhandlength, 0);
C.Stroke ();
C.Restore ();
};
/ * Dessiner des minutes de main (m: minute actuelle) * /
this.DrawMinHand = fonction (m) {
m = m === 0? 60: M;
c.save ();
C.Translate (Centre.x, Centre.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 ();
};
/ * Dessiner la seconde main (S: actuel deuxième) * /
this.DrawSechand = fonction (s) {
S = S === 0? 60: S;
c.save ();
C.Translate (Centre.x, Centre.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 ();
};
/ * Dessinez l'horloge en fonction de l'heure locale * /
this.drawclock = function () {
var me = ceci;
fonction Draw () {
var date = new Date ();
Canvas.clearcxt ();
Doontrackground ();
drawCenter ();
me.Drawhourhand (date.Gethours () + date.getMinutes () / 60);
me.DrawMinhand (date.getMinutes () + date.getSeconds () / 60);
me.DrawSechand (date.getSeconds ());
}
dessiner();
setInterval (Draw, 1000);
};
};
var main = function () {
var horloge = new canvas.clock ();
Clock.DrawClock ();
};
Certaines API d'élément Canvas simples sont impliquées dans le code. Faites juste une pause
Ce qui précède concerne cet article. J'espère qu'il sera utile à tout le monde d'apprendre la toile.