En este artículo, haremos un ‘Póster de Feliz Halloween’ usando un lienzo HTML, además de comprender algunas de las funciones básicas proporcionadas por el lienzo en Javascript. Canvas es una técnica digital para dibujar gráficos a través de JavaScript y los elementos del lienzo se pueden usar como contenedor de gráficos. Con esto, podemos dibujar una línea , un arco , un rectángulo o un color de relleno en cualquier figura cerrada o escribir texto también. dibujar
- lineTo(x, y): esta función se usa para dibujar una línea desde la ubicación actual del puntero del lienzo hasta un punto específico que tiene coordenadas x e y .
- arc(x, y, a1, a2, direction): podemos utilizar esta función para dibujar arcos que pueden ser semicírculos, círculos completos o cualquier parte del círculo según el ángulo inicial y el ángulo final dado que es a1 y a2 en radianes Además, podemos especificar las coordenadas del centro del círculo, que es x e y.
- moveTo(x, y): puede haber momentos en los que tengamos que mover el lápiz desde el punto actual a algún otro punto pero sin dibujar ninguna línea ni nada, por lo que esta función se puede usar para simplemente mover el lápiz a un punto cuyas coordenadas serán x e y.
- strokeText(“texto”, x, y): esta función se puede utilizar para insertar texto dentro del lienzo en el punto especificado con las coordenadas x e y.
- trazo(), relleno(): todas las funciones anteriores no sirven de nada si no usamos estas funciones para ordenar al lienzo cuándo dibujar/trazar algo y cuándo rellenar colores en una figura.
- beginPath(), closePath(): estas funciones deben usarse para decirle al lienzo cuándo comenzar/finalizar una ruta.
Propiedades del lienzo:
- strokeStyle: Define el color de la línea.
- fillStyle: Define el color con el que se rellenan las figuras.
- lineJoin: Define la forma en que las líneas serán en las juntas.
- lineCap: Define cómo deben verse los extremos de una línea.
- font: Define el estilo de fuente y el tamaño del texto.
Utilizaremos las funciones y propiedades anteriores del diseño Halloween.
Ejemplo: este ejemplo describe el uso del lienzo en HTM y Javascript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<style>
canvas {
border: 3px solid orange;
height: 600px;
width: 1000px;
margin-left: 10%;
}
</style>
<title>Halloween</title>
</head>
<body>
<canvas> </canvas>
<script>
const ctx =
document.querySelector("canvas").getContext("2d");
ctx.beginPath();
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.moveTo(20, 65);
ctx.lineTo(220, 125);
for(let i = 227; i <= 269; i += 3) {
ctx.moveTo(220, 125);
ctx.lineTo(i, 140);
}
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "black";
ctx.moveTo(60, 140);
ctx.lineTo(120, 79);
ctx.lineTo(135, 79);
ctx.lineTo(195, 140);
ctx.lineTo(60, 140);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(127, -30, 80, Math.PI / 3.5, (Math.PI * 3) / 4.2);
ctx.fill();
ctx.moveTo(127, 5);
ctx.lineTo(105, 40);
ctx.lineTo(149, 40);
ctx.lineTo(127, 5);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "orange";
ctx.arc(127, 43, 30, -Math.PI / 30, (-Math.PI * 35) / 36, false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.moveTo(127, 55);
ctx.lineJoin = "round";
ctx.lineCap = "round";
ctx.lineTo(112, 62);
ctx.lineTo(127, 58);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "black";
ctx.moveTo(122, 50);
ctx.lineTo(110, 46);
ctx.lineTo(106, 50);
ctx.lineTo(122, 50);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "black";
ctx.moveTo(135, 50);
ctx.lineTo(147, 46);
ctx.lineTo(151, 50);
ctx.lineTo(135, 50);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.moveTo(114, 65);
ctx.lineTo(118, 68);
ctx.lineTo(122, 65);
ctx.lineTo(126, 68);
ctx.lineTo(130, 65);
ctx.lineTo(134, 68);
ctx.lineTo(138, 65);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle = "orange";
ctx.font = "20px Serif";
ctx.strokeText("Happy", 210, 20);
ctx.strokeStyle = "black";
ctx.strokeText("Halloween", 185, 40);
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por vishal0171cse19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA