Teil II - Zeichnen Sie ein Zifferblatt
Die Uhr benötigt eine Uhr Gesicht. Erstellen Sie eine JavaScript-Funktion, eine Uhr Gesicht zu zeichnen:
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();
}
Versuch es selber " -Code Erklärung
Erstellen Sie eine drawFace () Funktion zum Zeichnen der Zifferblatt:
function drawClock() {
drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
}Zeichnen Sie den weißen Kreis:
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
Erstellen Sie einen radialen Gradienten (95% und 105% des ursprünglichen Takt Radius):
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);Erstellen Sie 3 Farbe stoppt, mit der inneren, mittleren entspricht und äußeren Rand des Bogens:
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');Die Farb Anschläge schaffen einen 3D-Effekt.
Definieren Sie die Steigung als Strichstil des Zeichnungsobjekts:
ctx.strokeStyle = grad;Definieren Sie die Linienbreite des Zeichnungsobjekts (10% des Radius):
ctx.lineWidth = radius * 0.1;Zeichnen Sie den Kreis:
ctx.stroke();Zeichnen Sie die Uhr Zentrum:
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();