¿Cuáles son los ejemplos de reloj calendario implementado por js Canvas?
Varcxt=documentación. getelementbyid('nombre del elemento'). obtener cont("2d");?
Los elementos no son compatibles con IE8 o navegadores anteriores.
2. dibujar reloj(): ¿implementar el reloj de dibujo?
1.clearRect() borra los píxeles especificados en el rectángulo dado. ?
context.clearRect(x, y, ancho, alto);
Propiedades |? value
- | -
x,y | Las coordenadas (x,y) de la esquina superior izquierda del rectángulo que se va a borrar.
Ancho, alto | El ancho y alto del rectángulo que se va a borrar, en píxeles 12345.
2.nueva fecha(): obtiene la hora del sistema.
var seg = ahora .obtener segundos();? var min = ahora .obtener minutos();? var hora = ahora .obtener horas();? 123
Dibujar la forma de un reloj
cxt . cxt .ancho de línea = 10;? cxt.strokeStyle = " azul?cxt.arc(550, 310, 300, 0, 360, false);?cxt . cerrar ruta();?cxt . trazo(); 123456
BeginPath() Se utiliza para dibujar el lienzo, se dibujarán todas las rutas después del último inicio.
Closepath() es una ruta cerrada, no una ruta final. Intentará conectar una ruta desde el final de la ruta actual. hasta el punto inicial, de modo que encierra todo el trazado.
Cxt.lineWidth(): El ancho del pincel.
Cxt.strokeStyle(): Establece o devuelve el color. gradiente o modo utilizado para el trazo. p>
Valor del atributo: el color indica el valor de color CSS del trazo del pincel de dibujo. El valor predeterminado es #000000.
Objeto de degradado (lineal o radial). utilizado para rellenar la forma.
Patrón es un objeto de patrón utilizado para crear un trazo de patrón
Trazo() dibuja un camino definido
El arco(. ) crea un arco/curva. Crea un círculo o un círculo parcial). Para crear un círculo mediante arc(), establece el ángulo inicial en 0 y el ángulo final en 2 * math.pi.. >context.arc( x, y, r, Sanle, eAngle, en sentido contrario a las agujas del reloj);
Parámetros
Describe
la coordenada x del centro del círculo x;
<. p>La coordenada y del centro del círculo y.El radio del círculo r
La posición de las tres en punto es 0 grados.
Ángulo final del ángulo, en radianes.
En sentido antihorario es opcional. Especifica si el gráfico debe ser en sentido antihorario o falso = en sentido horario, Verdadero = en sentido antihorario. >4) escala de dibujo: escala de dibujo de función definida por el usuario.
Función drawScale(tamaño, ancho, color, valor, startx, starty, endx, endy){?
for(var I = 0; i lt tamaño; i ){?
drawPointer(ancho, color, valor, I, startx, starty, endx, endy);?
} ?} ?12345
5. Dibujar el punto de soporte de la escala del reloj.
Función drawPointer (ancho, color, valor, ángulo, iniciox, inicio, finx). ,endy){?
cxt . save(); //¿Guardar el lienzo actual primero?
cxt.lineWidth = ancho;? // ¿Establecer el ancho del pincel?
cxt.strokeStyle = color//¿Establecer el color del pincel?
cxt.translate(550, 310); //¿Restablecer las coordenadas de origen de diferentes dimensiones?
cxt.rotate(valor*ángulo*math.PI/180);? //Establece el ángulo de rotación. ¿El parámetro está en radianes?
cxt .comenzar ruta();?
cxt.moveTo(startx, starty);?
cxt.lineTo(endx, endy);?
cxt . close path(); // ¿Primero cerrar la ruta y luego dibujar una línea?
cxt .stroke();? //¿Empezar a dibujar líneas?
cxt.restaurar();? // ¿Devolver el segmento de línea girado al lienzo? } ?12345678910111213
El método traducir() reasigna la posición (0, 0) en el lienzo.
-
El código JS es el siguiente:
// ¿Obtener el objeto del documento contextual? var reloj = documento . getelementbyid('reloj');?
var cxt = reloj . obtener contexto(' 2d ');?
//¿Dibujar un puntero? Función drawPointer(ancho, color, valor, ángulo, startx, starty, endx, endy) {?
cxt . save(); //¿Guardar el lienzo actual primero?
cxt.lineWidth = ancho;? // ¿Establecer el ancho del pincel?
cxt.strokeStyle = color//¿Establecer el color del pincel?
cxt.translate(550, 310); //¿Restablecer las coordenadas de origen de diferentes dimensiones?
cxt.rotate(valor*ángulo*math.PI/180);? //Establece el ángulo de rotación.
¿El parámetro está en radianes?
cxt .comenzar ruta();?
cxt.moveTo(startx, starty);?
cxt.lineTo(endx, endy);?
cxt . close path(); // ¿Primero cerrar la ruta y luego dibujar una línea?
cxt .stroke();? //¿Empezar a dibujar líneas?
cxt.restaurar();? // ¿Devolver el segmento de línea girado al lienzo? } ?
//¿Dibujar una escala? Función drawScale(tamaño, ancho, color, valor, startx, starty, endx, endy){?
for(var I = 0; i lt tamaño; i ){?
drawPointer(ancho, color, valor, I, startx, starty, endx, endy);?
} ?
} ?
//¿Rellenar el centro del dial con color? Función dibujarRelleno(){?
cxt .guardar();?
cxt .comenzar ruta();?
cxt.arc(550, 310, 7, 0, 360, falso);?
cxt .cerrar ruta();?
cxt.fillStyle = " rojo?
cxt . fill();?
cxt . restaurar();?
} ?
//DrawClock(){?
cxt.clearRect(0, 0, 1350, 620);? //¿Borrar todo el lienzo >
var ahora =? new Date(); //¿Obtener la hora, minutos y segundos del sistema?
var sec = now. ?
var hora = ahora. obtener horas();?
min = segundos/60;? p>hora=minuto/60;? (hora gt12) hora-= 12;?
cxt .begin path();
cxt .ancho de línea = 10;
cxt.strokeStyle = " ¿azul?
cxt.arc(550, 310, 300, 0, 360, falso);?
cxt .cerrar ruta();?
cxt .stroke();?
drawScale(12, 7, "rosa", 30, 0, -280, 0, -260);? //¿Hora de dibujar?
drawScale(60, 5, "rosa", 6,? 0, -280, 0, -270);? // ¿Dibujar una escala?
drawPointer(7, "púrpura", hora, 30, 0, 12, 0, -210);? // ¿Dibujar la manecilla de las horas?
drawPointer(5, "amarillo", min, 6, 0, 15, 0, -240); // ¿Dibujar el minutero?
drawPointer(4, "rojo", seg, 6, 0, 17, 0, -250);? //¿Dibujar el segundero?
//¿Refinar el segundero y añadir una flecha?
punto de dibujo
er(3,"rojo",sec,6,-7,-235,0,-255);?
drawPointer(3, "rojo", segundo, 6, 7, -235, 0, -255);?
dibujar relleno();?
} ?
dibujar reloj();?
setInterval(drawClock, 1000);? // ¿Usar el método //setInterval() significa que drawClock se ejecuta cada 1000 ms? 1234567891011121314151617181920212223242526272829303132333435363738 394041424344454647484950515253545556575859606162636465 666768697071