Parte II - disegnare un volto orologio
L'orologio ha bisogno di un quadrante di orologio. Creare una funzione JavaScript per disegnare un orologio:
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();
}
Prova tu stesso " Codice spiegato
Creare una funzione drawFace () per disegnare il quadrante dell'orologio:
function drawClock() {
drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
}Disegnare il cerchio bianco:
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
Creare un gradiente radiale (95% e il 105% di raggio orologio originale):
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);Creare 3 punti colore, corrispondente alla interna, centrale e bordo esterno dell'arco:
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');Le interruzioni di colore creano un effetto 3D.
Definire il gradiente come lo stile colpo di oggetto di disegno:
ctx.strokeStyle = grad;Definire la larghezza della linea dell'oggetto di disegno (10% di raggio):
ctx.lineWidth = radius * 0.1;Disegnare il cerchio:
ctx.stroke();Disegnare il centro di clock:
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();