Partea a II-a - Desenați o față ceas
Ceasul are nevoie de o fata de ceas. Creați o funcție JavaScript pentru a desena o fata de ceas:
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();
}
Încearcă - l singur » Codul pe înțelesul tuturor
Crearea unei drawFace() funcție pentru desenarea feței ceasului:
function drawClock() {
drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
}Desenați cercul alb:
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
Crearea unui gradient radial (95% and 105% of original clock radius) :
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);Creează 3 stații de culoare, care corespunde cu interior, mijloc și marginea exterioară a arcului:
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');Stațiile de culoare creează un efect 3D.
Definiți gradientul ca stilul de accident vascular cerebral a obiectului de desen:
ctx.strokeStyle = grad;Definiți lățimea liniei obiectului de desen (10% of radius) :
ctx.lineWidth = radius * 0.1;Desenați cercul:
ctx. stroke() ;Desenați centrul de ceas:
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();