Code final
Le code final est :
// On récupère le canvas et son contexte 2D var canvas = document.querySelector("canvas"); var ctx = canvas.getContext("2d"); // On règle le style du texte ctx.fillStyle = '#000'; ctx.font = '18px sans-serif'; // On rajoute les textes ctx.fillText('Hours', 38, 90); ctx.fillText('Minutes', 173, 90); ctx.fillText('Seconds', 308, 90); // Fonction executée toutes les secondes setInterval(function(){ ctx.clearRect(0, 0, 410, 75); // efface seulement nos digits var now = new Date(); // on récupère la date drawPart(35, 35, 95, 35, 30, 20, 15, now.getHours()); // on dessine les heures drawPart(175, 35, 235, 35, 30, 20, 15, now.getMinutes()); // on dessine les minutes drawPart(315, 35, 375, 35, 30, 20, 15, now.getSeconds()); // on dessine les secondes }, 1000); function drawPart(decX, decY, unitX, unitY, outerRadius, innerRadius, singleRadius, partValue) { var octValue = partValue.toString(8); var octUnit = octValue % 10; var octDec = Math.floor(octValue / 10); innerHex(decX, decY, singleRadius, octDec); outerHex(decX, decY, innerRadius, outerRadius, octDec); innerHex(unitX, unitY, singleRadius, octUnit); outerHex(unitX, unitY, innerRadius, outerRadius, octUnit); } function outerHex(cx,cy,r1,r2,value) { var PI2 = Math.PI*2; var rotationAdjustment = -90 * Math.PI/180; var sidecount = 6; for (var i = 0; i < sidecount; i++) { var startAngle = PI2/sidecount*i+rotationAdjustment; var endAngle = PI2/sidecount*(i+1)+rotationAdjustment; var cos0 = Math.cos(startAngle); var sin0 = Math.sin(startAngle); var cos1 = Math.cos(endAngle); var sin1 = Math.sin(endAngle); ctx.beginPath(); ctx.moveTo(cx+r1*cos0, cy+r1*sin0); ctx.lineTo(cx+r2*cos0, cy+r2*sin0); ctx.lineTo(cx+r2*cos1, cy+r2*sin1); ctx.lineTo(cx+r1*cos1, cy+r1*sin1); ctx.closePath(); if(value >= (i + 1)) { ctx.fillStyle = '#000'; } else { ctx.fillStyle = '#d4d4d4'; } ctx.fill(); } } function innerHex(cx, cy, radius, value) { var startAngle = -90; var edges = 6; var angle = 360/edges; ctx.beginPath(); for (var i = 0; i <= edges; i++) { var a = ((angle*i)+startAngle)*(Math.PI/180); var x = cx + radius * Math.cos(a); var y = cy + radius * Math.sin(a); ctx.lineTo(x, y); } if(value == 7) { ctx.fillStyle = '#000' } else { ctx.fillStyle = '#d4d4d4'; } ctx.fill(); }
Une démo fonctionnelle est disponible ici.