In diesem Artikel wird vorgestellt, wie man eine Uhr auf Leinwand zeichnet, und er wird mit allen geteilt. Die Details sind wie folgt:
Das Rendering ist
Obiger Code:
var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var year,month,day,hour,second,minute;//Zeichne die Wählfunktion drawClockPie(){ ctx.beginPath ( ); ctx.lineWidth = 2; ctx.StrokeStyle = '#333'; ctx.arc(150,150,146,0,2*Math.PI); ctx.closePath(); ctx.arc(150,150,6,0,2*Math.PI); ctx.fillStyle = 'red'; ctx.fill(); ctx.closePath();}// Skalieren Sie die Funktion drawClockHours(){ beim Zeichnen *Math.PI); ctx.beginPath(); ctx.lineWidth = 5; '#333'; ctx.moveTo(0,-140); ctx.close(); ctx.restore(); }} drawClockMins(){ for(var i = 0,l = 60; i < 60; i++){ ctx.save(); ctx.translate(150,150); ctx.rotate(i*1/60*2*Math.PI); ctx.lineWidth = 3; ctx.moveTo(0 ,-140); ctx.lineTo(0,-133); ctx.closePath(); ctx.restore(); }}// Stundenzeiger zeichnen Funktion drawHourPin(); ctx.translate(150,150); 60 +Sekunde)/(12*60*60)*2*Math.PI ctx.beginPath(); ctx.StrokeStyle = '#333'; ctx.moveTo(0,-40); ctx.closePath(); );}// Minutenzeiger zeichnen Funktion drawMinPin(){ ctx.save(); ctx.translate(150,150); ctx.rotate((minute*60+second)/(60*60)*2*Math.PI); ctx.StrokeStyle = '#333'; = 2; ctx.moveTo(0,0); ctx.lineTo(0,-60); ctx.Stroke(); ctx.closePath(); ctx.restore();}// Zeichne die Sekundenzeigerfunktion drawSecPin(){ ctx.translate(150,150); ctx.rotate(second/60 *2 *Math.PI); ctx.beginPath(); ctx.StrokeStyle = 'red'; = 1; ctx.moveTo(0,0); ctx.streich(); ctx.restore();}/ Zeittextfunktion zeichnen() { Stunde = Stunde >= 12 ? Stunde - 12 : Stunde; var time = 'Jetzt ist' + Jahr + 'Jahr' + Monat + 'Monat' + Tag + 'Tag' + Stunde + 'Stunde' + Minute + 'Minute' + Sekunde + 'Sekunde'; ctx.font = '15px Bold';}// Zeitfunktion abrufen getTimes(){ var date = new Date (); Jahr = date.getFullYear(); Monat = date.getMonth() + 1; Tag = date.getDate(); date.getHours(); minute = date.getMinutes(); second = date.getSeconds();}setInterval(function(){ ctx.clearRect(0,0,600,600); drawClockPie(); drawClockHours(); drawClockMins(); getTimes(); drawText(); drawHourPin(); drawSecPin();},1000); Notiz:Natürlich muss die Zeit nicht jede Sekunde ermittelt werden, sondern kann direkt einmal ermittelt und um Sekunden erhöht werden.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.