Siendo Creativos

<meta charset = "UTF-8">

<canvas width="600" height="400"></canvas>

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "lightgray"; //propiedad
    pincel.fillRect(0,0,600,400);//funcion

    pincel.fillStyle = "green";
    pincel.fillRect(0,0,200,400);

    pincel.fillStyle = "red";
    pincel.fillRect(400,0,200,400);

    pincel.fillStyle = "yellow";
    pincel.beginPath();
    pincel.moveTo(300,200);
    pincel.lineTo(200,400);
    pincel.lineTo(400,400);
    pincel.fill();

    pincel.fillStyle = "blue";
    pincel.beginPath();
    pincel.arc(300,200,50,0,2*3.14)
    pincel.fill();


</script>

2 respuestas

por Adrian Abel Vargas Rodriguez

| 64.9k xp | 264 posts

08/05/2022

Aun tenfo dudas con la parte concerniente a las ubicaciones (400,0,200,400), hace refencia a las partes que componen el plano pero como diferenciar las posiciones dentro del () en linea de codigo?

por Tomás Ezequiel Aguirre

| 222.9k xp | 161 posts

08/05/2022

Hola Adrian, no estoy seguro de haber comprendido tu pregunta. Pero si te refieres a que representan los argumentos que debemos pasarle a fillRect son los siguientes: fillRect(x,y,width,height) ese es el orden y representacion de cada uno, si los vas cambiando y vez los cambios que va realizando podras comprenderlo mejor.

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad La parte marcada con verde es nuestra referencia para dibujar en canvas, el punto inicial esta marcado con rojo que seria las coordenadas (0,0), si aumentas el eje x, el dibujo se correra para ese lado y empezara a dibujar a partir de ahi, lo mismo sucede con el eje y. El ancho crece de manera horizontal, o sea en direccion al eje x, y el alto crece en vertical con direccion al eje y. Ambos se empiezan a dibujar a partir del punto inicial (x,y).

Espero haberte ayudado te mando un saludo!