Cómo dibujar sombras y patrones de relleno usando lienzo HTML5
Podemos dibujar efectos de sombra en gráficos o texto en el lienzo HTML5. Las sombras del lienzo son muy simples y con sólo unas pocas configuraciones simples puedes generar automáticamente una sombra apropiada debajo de una imagen o texto. Aquí hay un ejemplo simple:
En el lienzo, la sombra de la forma está controlada por 4 propiedades del contexto 2D:
shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor
Las propiedades ShadowOffsetX y ShadowOffsetY son la distancia entre la sombra y la forma. Los valores positivos significan que la sombra se dibuja a la derecha del gráfico (dirección X) o debajo del gráfico (dirección Y). Los valores negativos significan que la sombra se dibuja a la izquierda del gráfico (dirección X) o encima del gráfico (dirección Y). Su valor predeterminado es 0.
La propiedad ShadowBlur se utiliza para establecer el efecto de desenfoque de la sombra. Cuanto mayor sea el valor, más borrosa será la sombra. Cuanto menor sea el valor, más nítida será la sombra. Su valor es un número de punto flotante, 0 significa que la sombra no está borrosa.
shadowColor representa el color de la sombra. shadowBlur = 4;
context.shadowColor = #666666; //o use rgb(rojo, verde, azul)
var context = canvas.Font = 30px Arial;
context.fillText(HTML5 Canvas Shadow, 10, 120);
Patrones de relleno
Patrones de relleno se refiere al uso de una imagen específica como patrón para rellenar los gráficos en el lienzo. Podemos crear un patrón de relleno usando el método createPattern(). La sintaxis es: createPattern(imagen, tipo).
El parámetro imagen puede ser un elemento de imagen HTML, otro lienzo o elemento, etc.
El tipo de parámetro indica cómo se utilizará la imagen para crear un patrón específico. Puede tener los siguientes valores:
repetir: Repite la imagen horizontal y verticalmente.
repeat-x: Repite la imagen solo horizontalmente.
repetir-y: Repite la imagen sólo en dirección vertical.
no-repeat: No repite la imagen y solo la muestra una vez. onload = function(){
//Crear patrón
var ptrn = ctx.createPattern(img, repetir);
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 150, 150)
La imagen utilizada en el patrón es la siguiente:
El código anterior devuelve lo siguiente: