Ejercicios resueltos Canvas HTML5

Ejercicio 1

Dibujar el siguiente rectángulo, por dentro estará relleno en negro.

canvas

<!-- Dibujaremos un rectángulo, y por dentro estará relleno en negro --> 
<!-- 1. Creamos el lienzo --> 
<canvas id="MiCanvas" width="200" height="200" style="border:solid 1px #000000;margin:auto;display:block;"> 
</canvas> 
<script>
var canvas=document.getElementById('MiCanvas'); 
//2. Desde Javascript identificamos el contexto de trabajo. 
// getContext('2d'): Devuelve un contexto de renderizado para el canvas. 
var MiCanvas_contexto=canvas.getContext('2d'); 
//3. Desde Javascript insertamos los elementos de dibujo. 
// fillRect(x,y,w,h): Dibuja rectángulo relleno con el vértice superior izquierdo en x,y 
// de anchura w y altura h. MiCanvas_contexto.fillRect(5,5,190,190); 
</script>

Ejercicio 2

Dibujar el siguiente rectángulo, por dentro estará relleno en rojo. Dibujar un círculo dentro del relleno rojo.

canvas

<!-- Dibujaremos un rectángulo, y por dentro estará relleno de rojo. Dentro de ese relleno en rojo
     dibujaremos un círculo  -->
<!-- 1. Creamos el lienzo -->
<canvas id="MiCanvas" width="200" height="200" style="border:solid 1px #000000;margin:auto;display:block;">
</canvas>
<script>
var canvas=document.getElementById('MiCanvas');
//2. Desde Javascript identificamos el contexto de trabajo.
//   getContext('2d'): Devuelve un contexto de renderizado para el canvas.
var MiCanvas_contexto=canvas.getContext('2d');
//3. fillStyle: esta propiedad define el color de relleno(por defecto es #0000000 o negro)
MiCanvas_contexto.fillStyle= "#FF0000";
MiCanvas_contexto.fillRect(5, 5, 190, 190);
//4. Comienza el camino.
MiCanvas_contexto.beginPath();
//5. arc(x,y,r,ai,af,ah): Arco centrado en (x,y), de radio r, ángulo inicial ai, ángulo final af
//y un booleano si es antihorario.
MiCanvas_contexto.arc(50,10,2,0,2*Math.PI);
//6. stroke(). Traza por la ruta especificada con el estilo establecido.
MiCanvas_contexto.stroke();

</script>

Ejercicio 3

Dibujar un rectángulo, dentro de este dibujar un triángulo con relleno en negro.

canvas

<!-- Dibujaremos un rectángulo, y dentro de este dibujaremos un triángulo relleno en negro  -->
<!-- 1. Creamos el lienzo -->
<canvas id="MiCanvas" width="200" height="200" style="border:solid 1px #000000;margin:auto;display:block;">
</canvas>
<script>
var canvas=document.getElementById('MiCanvas');
//2. Desde Javascript identificamos el contexto de trabajo.
//   getContext('2d'): Devuelve un contexto de renderizado para el canvas.
var MiCanvas_contexto=canvas.getContext('2d');
//3. Comienza el camino.
MiCanvas_contexto.beginPath();
//4. moveTo(x,y): Comienza una nueva subruta en x,y.
MiCanvas_contexto.moveTo(50,10);
//5. lineTo(x,y): Agrega una línea recta a la subruta actual conectando el último punto de la subruta actual.
MiCanvas_contexto.lineTo(10,70);
MiCanvas_contexto.lineTo(90,70);
MiCanvas_contexto.lineTo(50,10);
//6. closePath(): Acaba la ruta.
MiCanvas_contexto.closePath();
//7. fill(): Rellena el trazo con el estilo establecido. Color negro por defecto.
MiCanvas_contexto.fill();

</script>

 

Ejercicio 4

Dibujar un rectángulo, dentro de este dibujar un triángulo no relleno con las líneas en negro.

canvas

<!-- Dibujaremos un rectángulo, y dentro de este dibujaremos un triángulo no relleno -->
<!-- 1. Creamos el lienzo -->
<canvas id="MiCanvas" width="200" height="200" style="border:solid 1px #000000;margin:auto;display:block;">
</canvas>
<script>
var canvas=document.getElementById('MiCanvas');
//2. Desde Javascript identificamos el contexto de trabajo.
//   getContext('2d'): Devuelve un contexto de renderizado para el canvas.
var MiCanvas_contexto=canvas.getContext('2d');
//3. Comienza el camino.
MiCanvas_contexto.beginPath();
//4. moveTo(x,y): Comienza una nueva subruta en x,y.
MiCanvas_contexto.moveTo(50,10);
//5. lineTo(x,y): Agrega una línea recta a la subruta actual conectando el último punto de la subruta actual.
MiCanvas_contexto.lineTo(10,70);
MiCanvas_contexto.lineTo(90,70);
MiCanvas_contexto.lineTo(50,10);
//6. closePath(): Acaba la ruta.
MiCanvas_contexto.closePath();
//7. stroke(): Dibuja un triángulo no relleno de color negro.
MiCanvas_contexto.stroke();

</script>

 

Ejercicio 5

Dibujar un rectángulo, dentro de este dibujar parte de un triángulo no relleno con las líneas en negro.

canvas

<!-- Dibujaremos un rectángulo, y dentro de este dibujaremos parte de un triángulo no relleno de color negro -->
<!-- 1. Creamos el lienzo -->
<canvas id="MiCanvas" width="200" height="200" style="border:solid 1px #000000;margin:auto;display:block;">
</canvas>
<script>
var canvas=document.getElementById('MiCanvas');
//2. Desde Javascript identificamos el contexto de trabajo.
//   getContext('2d'): Devuelve un contexto de renderizado para el canvas.
var MiCanvas_contexto=canvas.getContext('2d');
//3. Comienza el camino.
MiCanvas_contexto.beginPath();
//4. moveTo(x,y): Comienza una nueva subruta en x,y.
MiCanvas_contexto.moveTo(50,10);
//5. lineTo(x,y): Agrega una línea recta a la subruta actual conectando el último punto de la subruta actual.
MiCanvas_contexto.lineTo(10,70);
MiCanvas_contexto.lineTo(90,70);
//6. stroke(): Dibuja un triángulo no relleno de color negro.
MiCanvas_contexto.stroke();

</script>

 

Deja un comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies ACEPTAR

Aviso de cookies