Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

Siendo Creativos

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

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?

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 accesibilidadLa 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!