Partie II - dessiner un visage d'horloge
L'horloge a besoin d'un cadran d'horloge. Créer une fonction JavaScript pour dessiner un visage d'horloge:
JavaScript:
function drawClock() {
drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
Essayez - le vous - même » code Explained
Créer une fonction drawFace () pour dessiner le visage de l'horloge:
function drawClock() {
drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
}Dessinez le cercle blanc:
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
Créer un dégradé radial (95% et 105% du rayon d'horloge d'origine):
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);Créer 3 arrêts de couleurs, correspondant à l'intérieur, au milieu, et le bord externe de l'arc:
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');Les arrêts de couleurs créent un effet 3D.
Définir le gradient comme le style de course de l'objet de dessin:
ctx.strokeStyle = grad;Définir la largeur de ligne de l'objet de dessin (10% du rayon):
ctx.lineWidth = radius * 0.1;Tracer le cercle:
ctx.stroke();Dessinez le centre de l'horloge:
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();