Prefacio: Terminé de leer el lienzo de lienzo del libro JS hoy. Estoy tan feliz ~ soy mi amado lienzo de nuevo ~ ouye ~
Vi a alguien sugiriéndome que dibujara a un hombre gordo azul antes, sí, ¿por qué olvidé el hombre gordo azul favorito que tenía en mi infancia? Para expresar mi disculpa al hombre gordo azul, dibujé un mundo móvil de Hello World hoy, que también es una especie de mejora ~
Bien, por favor vaya hacia adentro para los pasajeros. Por favor, no bloquee el pasaje, gracias. Vamos a conducir ~
texto:
Tomemos una foto hoy y veamos el efecto
Hoy, el hombre azul gordo se ve así, y me siento aliviado al ver que todavía está tan gordo. Este mundo todavía está lleno de energía positiva, y todavía hay personas que son más gordas que yo, jajaja
Entonces el código
parte html
<Canvas id = "mycanvas"> vaya y actualice su navegador ~ </lienvas>
Parte js
Window.adDeventListener ("Load", function () {// Obtener el contexto de Canvas var context = document.getElementById ("myCanVas"). getContext ("2d"); // juzga si el contexto existe, si existe, puede ejecutar el siguiente código si (context) {// iniciar un nuevo context.beginpath (); // bordes del reloj // dibujar un círculo grande fuera del context.arc (100,100,99,0,2*math.pi, falso); // relleno context.fillstyle = "#315f9b"; context.fill (); // dibujar el borde del círculo grande context.stroke (); // iniciar una subpath, // Esto es necesario, de lo contrario, el color de relleno todo el color anterior en el color anterior en el color anterior. context.beginpath (); // Mueve el punto de partida a (194,100) y calcule el punto context.moveto (194,100); // dibuje el pequeño círculo dentro (¿dios redondo?) Context.arc (100,100,94,0,2*Math.pi, falso); // Llena el pequeño círculo dentro con otro contexto de color azul de luz amable. "#4BA22CF"; context.fill (); context.stroke (); // El hombre gordo azul aparece ~ // Crear un objeto de imagen y establecer su src en la imagen var de la imagen del hombre de grasa azul = nueva imagen (); image.src = "2.png"; // Use la dibujo del método de contexto para extraer el punto de la imagen del punto (25,25), y dibujar en un recto con un recto con un longitud de 150 context.drawImage(image,25,25,150,150);//Move the transformation matrix//After moving (100,100) as the new origin, that is (0,0)context.translate(100,100);//Draw our time point context.fillStyle = "#02285a";//The first parameter is the string to be drawn, the second parameter is x, and the third is y//The following x, el valor y es el efecto después de la depuración.Aparecen los diales de los relojes anteriores, pero la razón más importante por la cual el reloj es un reloj es que puede mostrar el tiempo (sin sentido), por lo que el siguiente paso es dibujar el puntero.
parte de la función de tiempo
function nowtime (context) {// crea un objeto de fecha para obtener la hora local var myDate = new Date (); // Obtener horas, minutos, segundos var myHour = myDate.gethours (); // Convertir la hora a 12-Hour Format if (myHour> = 12) {myHour = myHour-12;} var myMin = myDate.getmines (); var mysec =; var mySEC =; myDate.getSeconds (); // Describa la hora // Usar para almacenar los radianos de la hora actual en el dial var hourarc; // use 3 horas como punto de partida de la circunferencia, que representa los radianos en sentido horario si (myhour <3) {hourarc = 2*math.pi- (3-miyhour)*math.pi/6;} más (myhour-3)*Math.pi/6;} // Al señalar 3, 6, 9, 12, es exactamente un múltiplo de 90 ° // Hay una desviación del ángulo convertido a radianes, por lo que se da un tratamiento especial para cambiar (myhour) {case 0: Math.pi*3/2; ruptura; caso 3: hourarc = 0; case 6: hora 6: ruptura de math.pi/2; 9: Hourarc = Math.pi; Break;} // Llame a la función de tiempo de dibujo y tiempo de dibujo (contexto, horaC, 60); // dibujar minutos // Use el radian var minarc en el dial del minuto actual en el dial; // use 15 minutos como punto de partida de la circunferencia para representar el radian en sentido horario if (mymin <15) {minarc = 2*math.pi- (15-mymin)*math.pi/30;} else {minarc = (mymin-15)*math.pi/30;} // minutos de procesamiento, todavía está aquí porque el ángulo está convertido a radianos, por lo tanto (mymin). Math.PI*3/2;break;case 15:minArc = 0;break;case 30:minArc = Math.PI/2;break;case 45:minArc = Math.PI;break;}//Call drawTime function and drawTime(context,minArc,80);//Draw seconds//Use the current second to store the radian var secArc on the dial;//Use 15 seconds as the starting point of the circumference, and represent the radian en sentido horario if (mySec <15) {secarc = 2*Math.pi- (15-mysec)*Math.pi/30;} else {SECARC = (mySec-15)*Math.pi/30;} // Processing por segundos, todavía está aquí porque el ángulo se convierte en radianos y hay un desviación, por lo que el procesamiento especial es cambiante (mysec) {CASE 0: SECARC = SECARC. Math.Pi*3/2; Break; Case 14: Secarc = 0; Break; Case 29: Secarc = Math.pi/2; Break; Case 44: Secarc = Math.Pi; Break;} // Llame a la función de tiempo de dibujo y tiempo de dibujo (context, SECARC, "Red"); // Establezca una función de tiempo de tiempo de tiempo de tiempo, llame ahora el tiempo de llamada de tiempo de tiempo de tiempo para actualizar el tiempo de actualización del reloj (). Un nuevo puntero, por supuesto, debe limpiar la mano de la hora original.Entonces, ¿cómo dibujamos específicamente los consejos cuando operamos el contexto? Yo tampoco lo sé, así que terminemos hoy ~
Es broma, jeje, tómalo con calma (debe fingir que me voy a meter contigo)
La siguiente es la función de tiempo de dibujo, que tiene cuatro parámetros en total (contexto, thearc, thelength, color = "#000"). El contexto se ve a través del contexto que es el lienzo a primera vista, Thearc es el ángulo donde queremos rotar el lienzo, la longitud representa la longitud del puntero y el color es el color del puntero.
Funcion DrawTime (contexto, thEArc, theLength, color = "#000") {// Guardar el entorno de lienzo actual y úselo en conjunto con el método de restauración para restaurar el context.save (); // rotar el lienzo, los parámetros pasados en rotación representan el contexto radiano de rotación. context.beginpath (); // Mueva el punto de inicio a (0,0) context.moveto (0,0); // dibuje una ruta a (thelength, 0); // dibuje esta ruta con el color especificado context.strokestyle = color; // El ancho de la ruta es 2context.linewidth = 2; // El camino es invisible. Si desea ver la ruta, debe usar el trazo para rastrear la línea. Cómo rastrear esta línea se puede definir mediante los varios atributos que utilizamos anteriormente; // restaurar context context.restore ();}Aunque está llegando a su fin, también hay una función de tiempo claro muy importante. Sin él, su reloj estará ocupado por densos segundos. Todos tenemos la responsabilidad de atender a pacientes con fobia intensiva.
function clearTime(context){//We start a new subpath, and then draw a circle full of beautiful blue, covering the pointers we drew before, which is equivalent to clearing the dial context.beginPath();context.arc(0,0,80,0,2*Math.PI,false);context.fillStyle = "#4ba2cf";context.fill();// Unfortunately, our blue fat man was also herido por accidente, así que convótelo nuevamente, y será usted, Pikachu (? Huh) var Image = New Image (); Image.src = "2.png"; // Esta coordenada es diferente de las coordenadas cargadas por primera vez, porque modificamos la matriz de transformación, ¿todavía recuerda? Por lo tanto, sus coordenadas deben ser contexto complementario.Bueno, está bien, realmente está de aquí ahora, es casi el momento de ir a comer ~ queridos programadores lindos, recuerda comer ~