Canvas

Introducción a la Informática 1
Canvas
Canvas
Wilson Henao Arias
Risaralda, Universidad Tecnológica de Pereira, Pereira, Colombia
wilson.henao@utp.edu.co
Resumen— <canvas> es un nuevo elemento HTML que puede
usarse para dibujar gráficos a través de scripting (normalmente
JavaScript). Por ejemplo, puede emplearse para dibujar gráficos,
hacer composición de fotos, crear animaciones e incluso
procesamiento de vídeo en tiempo real.
Palabras clave— animaciones, HTML, JavaScript, gráficos.
Abstract— <canvas> is a new HTML element that can be used to
draw graphics through scripting (usually JavaScript). For
example, it can be used to draw graphics, make photo
composition, and create animations and even video processing in
real time.
Key Word — animations, html, JavaScript, graphics.
I. INTRODUCCIÓN
Canvas (o lienzo traducido al español) es un elemento HTML
incorporado en HTML5 que permite la generación de gráficos
dinámicamente por medio del scripting. Entre otras cosas,
permite la renderización interpretada dinámica de gráficos 2D
y mapas de bits, así como animaciones con estos gráficos. Se
trata de un modelo de procedimiento de bajo nivel, que
actualiza un mapa de bits y no tiene una gráfica de escena
integrada.
Canvas fue introducido inicialmente por Apple para su uso
dentro de su propio componente de Mac OS X Surgido en
2004, para empujar aplicaciones como widgets de Dashboard
y el navegador Safari. Más tarde, en 2005, se adoptó en la
versión 1.8 de los navegadores Gecko y Opera en 2006. Fue
estandarizado por el Grupo de Trabajo de Tecnologías de
Aplicación de hipertexto Web (WHATWG por sus siglas en
inglés) sobre las nuevas especificaciones propuestas para
tecnologías web de última generación.
El Canvas consiste en una región dibujable definida en el
código HTML con atributos de altura y ancho. El código
JavaScript puede acceder a la zona a través de un conjunto
completo de funciones similares a las de otras APIs comunes
de dibujo 2D, permitiendo así que los gráficos sean generados
dinámicamente. Algunos de los usos previstos incluyen
construcción de gráficos, animaciones, juegos, y la
composición de imágenes.
II. CONTENIDO
El elemento HTML <canvas> se utiliza para dibujar gráficos
en una página web, en HTML, un elemento <canvas> tiene
este aspecto:
El elemento <canvas> debe tener un atributo id para que
pueda ser referido por JavaScript.
El atributo width y height es necesario para definir el tamaño
del lienzo.
He aquí algunos ejemplos de lo que se puede realizar con este
elemento.
1.
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw() {
var ctx =
document.getElementById('canvas').getCo
ntext('2d');
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 6; j++) {
ctx.strokeStyle = 'rgb(0, ' +
Math.floor(255 - 42.5 * i) + ', ' +
Math.floor(255
- 42.5 * j) + ')';
ctx.beginPath();
ctx.arc(12.5 + j * 25, 12.5 + i
* 25, 10, 0, Math.PI * 2, true);
ctx.stroke();
}
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black;
}
Fecha de Recepción: (Letra Times New Roman de 8 puntos)
Fecha de Aceptación: Dejar en blanco

Introducción a la Informática
</style>
</head>
<body onload="draw();">
<canvas id="canvas" width="150"
height="150"></canvas>
</body>
</html>
Resultado:
2.
Código:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="450"
height="80"
style="border:3px solid #FF7733;">
Your browser does not support the
canvas element.
</canvas>
<script>
var canvas =
document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeStyle = "#A833FF";
ctx.strokeText("Introducción a la
Informática",10,50 );
</script>
</body>
</html>
Resultado:
3.
<!DOCTYPE html>
<html>
<head>
function draw() {
var ctx =
ntext('2d');
ctx.fillRect(0, 0, 150, 150); //
Draw a rectangle with default settings
ctx.save(); // Save
the default state
ctx.fillStyle = '#09F'; // Make
changes to the settings
ctx.fillRect(15, 15, 120, 120); //
Draw a rectangle with new settings
ctx.save(); // Save
the current state
ctx.fillStyle = '#FFF'; // Make
changes to the settings
ctx.globalAlpha = 0.5;
ctx.fillRect(30, 30, 90, 90); //
Draw a rectangle with new settings
ctx.restore(); //
Restore previous state
ctx.fillRect(45, 45, 60, 60); //
Draw a rectangle with restored settings
ctx.restore(); //
Restore original state
ctx.fillRect(60, 60, 30, 30); //
Draw a rectangle with restored settings
}
</script>
}
</style>
</head>
</body>
</html>
Resultado:
2

Introducción a la Informática
4.
<!DOCTYPE html>
<html>
<head>
function draw() {
var ctx =
ntext('2d');
// left rectangles, rotate from
canvas origin
ctx.save();
// blue rect
ctx.fillStyle = '#0095DD';
ctx.fillRect(30, 30, 100, 100);
ctx.rotate((Math.PI / 180) * 25);
// grey rect
ctx.fillStyle = '#4D4E53';
ctx.fillRect(30, 30, 100, 100);
ctx.restore();
// right rectangles, rotate from
rectangle center
// draw blue rect
ctx.fillStyle = '#0095DD';
ctx.fillRect(150, 30, 100, 100);
ctx.translate(200, 80); // translate
to rectangle center
// x = x +
0.5 * width
// y = y +
0.5 * height
ctx.rotate((Math.PI / 180) * 25); //
rotate
ctx.translate(-200, -80); //
translate back
// draw grey rect
ctx.fillStyle = '#4D4E53';
ctx.fillRect(150, 30, 100, 100);
}
</script>
}
</style>
</head>
</body>
</html>
Resultado:
III. CONCLUSIONES
Podemos llegar a concluir que en cuanto a éstetica y agradable
vista ante la herramienta que se desarrolle, el elemento canvas
nos puede ayudar a la hora de querer unos gráficos
profesionalmente diseñados.
REFERENCIAS
https://www.w3schools.com/html/html5_canvas.asp
https://developer.mozilla.org/es/docs/Web/HTML/Canvas
https://es.wikipedia.org/wiki/Canvas_(HTML)
____________________________
1. Las notas de pie de página deberán estar en la página donde se citan. Letra Times New Roman de 8 puntos
3

Canvas

Recomendados

Recomendados

Más contenido relacionado

Similar a Canvas

Similar a Canvas (20)

Más de WilsonHenao97

Más de WilsonHenao97 (13)

Último

Último (20)

Canvas