Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Haz lo que hicimos en aula

<!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">
    <title>Programa Canvas</title>
</head>
<body>

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

    <!--Se usa para Java script-->
    <script>
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

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

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

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

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

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

    </script>
</body>
</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">
    <title>Document</title>
</head>
<body>

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

    <!--Se usa para Java script-->
    <script>
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.fillStyle = "green"; 
        pincel.fillRect(0,0,350,300);//Cuerpo

        pincel.fillStyle = "black";
        pincel.fillRect(140,140,70,100);  //Tronco
        pincel.fillRect(100,190,40,110); //Pierna Izquierda
        pincel.fillRect(210,190,40,110); //Pierna derecha
        pincel.fillRect(210,50,90,90); //Ojo Derecho
        pincel.fillRect(50,50,90,90); //Ojo izquierdo
    </script>
</body>
</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">
    <title>Diseñando una Escuadra</title>
</head>
<body>

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

    <!--Se usa para Java script-->
    <script>
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.fillStyle = "black"; 
        pincel.beginPath();
        pincel.moveTo(50, 50);
        pincel.lineTo(50,400);
        pincel.lineTo(400,400);
        pincel.fill();

        pincel.fillStyle = "white"
        pincel.beginPath();
        pincel.moveTo(100, 175);
        pincel.lineTo(100, 350);
        pincel.lineTo(275, 350);
        pincel.fill();


    </script>
</body>
</html>
1 respuesta

Hola estudiante, Gracias por compartir la solución de tus ejercicios con nosotros. ¿Sabias que puedes interactuar con el resto de tus compañero por nuestro Discord? En Discord el alcance es mayor, la interacción es inmediata y llega a más compañeros de esta forma el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos. Un saludo!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios