Canvas

Introducción a la informática 2017 1
Canvas
canvas
Manuela López Cardona
Departamento de ingenierías, Universidad Tecnológica de Pereira, Colombia
Correo-e: manulc1199@gmail.com
Resumen— es un elemento HTML el cual puede ser usado para
dibujar gráficos usando scripts (normalmente JavaScript). Este
puede, por ejemplo, ser usado para dibujar gráficos, realizar
composición de fotos o simples (y no tan simples) animaciones. Las
imágenes a la derecha muestran algunos ejemplos de
implementaciones canvas las cuales se verán en un futuro en este
tutorial.
Palabras clave— Figuras, Gráficos, HTML, Programación.
Abstract—
is an HTML element which can be used to draw graphs using
scripts (usually JavaScript). This can, for example, be used to
draw graphics, perform photo composition or simple (and not so
simple) animations. The images on the right are examples of
<canvas> implementations which are in the future in thistutorial.
Key Word — Figures, Graphics, HTML, Programming.
I. INTRODUCCIÓN
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.
Las aplicaciones de Mozilla han implementado canvas a partir
de Gecko 1.8 (es decir, Firefox 1.5). El elemento fue presentado
originalmente por Apple para OS X Dashboard y Safari.
Internet Explorer soporta canvas desde la versión 9 en adelante,
para versiones anteriores de IE, una página web puede añadir
la compatibilidad de forma eficaz incluyendo un script que se
puede descargardesde el proyecto Explorer Canvas de Google.
Google Chrome y Opera 9 también soportan canvas.
II. CONTENIDO
2.1 Antes de empezar
Usar el elemento canvas no es algo muy difícil pero necesita
saber y entender los aspectos básicos del HTML y JavaScript.
El elemento canvas no está soportado en navegadores viejos,
pero están soportado en la mayoría de las versiones más
recientes de los navegadores.El tamaño por defecto del canvas
es 300px * 150px [ancho (width) * alto (height)]. Pero se puede
personalizar el tamaño usando las propiedades height y width
de CSS. Con el fin de dibujar gráficos en el lienzo canvas se
utiliza un objeto de contexto de JavaScript que crea gráficos
sobre la marcha.
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.
Canvas permite realizar gráficos de todo tipo, desde una línea
recta hasta juegos interactivos, también permite manipular
imágenes para cambiarles el tono, buscar bordes, aplicaciones
de visión artificial, etc. En este artículo veremos sólo una
introducción al mundo Canvas.
2.2 Ejemplos
2.2.1 Vamos a verun ejemplo sencillo que dibuja un rectángulo
gris de 450 x 350 pixels ocupando todo el Canvas. Sobre este
ejemplo explicaremos los conceptos básicos sobre Canvas.
<html>
<head>
<title>Ejemplo1 Canvas </title>
<script type="text/javascript">
function dibujarCanvas(){
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
contexto.fillStyle = '# F333FF';
contexto.fillRect (0, 0, 450, 350);
}
</script>
</head>
<body onLoad="dibujarCanvas();">
<p>Dibujo con Canvas:</p>
<canvas id="miCanvas" width="450" height="350">Su
navegador no soporta Canvas.</canvas>
</body>
</html>

Introduccióna la Informática 20172
2.2.2 dibujar un triangulo línea por línea para después
rellenarlo.
<html>
<head>
// a. Forma abierta
contexto.beginPath();
contexto.moveTo(50,50);
contexto.lineTo(50,150);
contexto.stroke();
// b. Forma cerrada con relleno
contexto.fill();
// c. Forma cerrada sin relleno
contexto.closePath();
contexto.stroke();
}
</script>
</head>
</body>
</html>
2.2.3 Arcos
<html>
<head>
// a. Arco desde 0 grados hasta 90 grados en
sentido de las agujas del reloj
contexto.arc(60,60,50,radianes('0'),radianes('90'),false);
contexto.stroke();
// b. Arco desde 0 grados hasta 90 grados en
sentido contrario de las agujas del reloj
contexto.arc(200,60,50,radianes('0'),radianes('90'),true);
contexto.stroke();
// c. Arco desde 90 grados hasta 270 grados
en sentido de las agujas del reloj
contexto.arc(350,60,50,radianes('90'),radianes('270'));
contexto.stroke();
}
function radianes(grados){
var radianes = (Math.PI/180)*grados;
return radianes;
}
</script>
</head>
</body>
</html>

Introducción a la Informática 2017. 3
2.2.4 dibujar un caracol
<html>
<head>
<title>Ejemplo 5 Canvas </title>
// primera formaa, dibujar espiral
var x=100; // x centro espiral
var y=70; // y centro espiral
var r=0; // radio inicial
var incre=3; // incremento del radio
var vueltas=5; // vueltas
for(var i=1;i<=vueltas;i++){
contexto.arc(x,y,r=r+incre, 0,radianes(90),false);
contexto.arc(x,y-incre,r=r+incre,
radianes(90),radianes(180),false);
contexto.arc(x+incre,y-
incre,r=r+incre,radianes(180),radianes(270),false);
contexto.arc(x+incre,y,r=r+incre, radianes(270),0,false);
}
contexto.lineWidth = 4; // ancho de línea
contexto.fillStyle = '#99CC00'; // verde
contexto.fill(); // dibujar relleno
contexto.strokeStyle = 'rgb(1,64,224)'; // azul
contexto.stroke(); // dibujar trazo
// segunda forma, circulo y segmento
contexto.arc(330,30,15, radianes(0),radianes(360),false);
contexto.lineWidth = 6;
contexto.fillStyle = '#FFFF99'; // amarillo
contexto.fill();
contexto.stroke();
// tercera forma rectangulo rojo transparente
contexto.fillStyle = 'rgba(221,64,4, 0.2)'; // rojo transparente
contexto.fillRect(300,5,125,75);
}
function radianes(grados){
var radianes = (Math.PI/180)*grados;
return radianes;
}
</script>
</head>
</body>
</html>
2.2.5 Degrade en formas
<html>
<head>
<title>Ejemplo 6 Canvas </title>
// gradiente lineal vertical
var gradienteLineal =
contexto.createLinearGradient(0,0,0,100);
gradienteLineal.addColorStop(0, 'rgb(255,0,0)'); // rojo
gradienteLineal.addColorStop(0.5, '#fff'); // blanco
gradienteLineal.addColorStop(1, 'rgb(50,220,0)'); // verde
contexto.fillStyle = gradienteLineal;
// gradiente lineal horizontal
gradienteLineal.addColorStop(0, 'rgb(255,0,0)');
gradienteLineal.addColorStop(0.5, '#fff');
// gradiente lineal diagonal

Introduccióna la Informática 20174
gradienteLineal.addColorStop(0.5, '#fff');
// gradiente lineal sobre trazo
gradienteLineal.addColorStop(0, 'red'); // rojo
gradienteLineal.addColorStop(1, 'white'); // blanco
contexto.strokeStyle = gradienteLineal;
contexto.strokeRect(10,110,30,100);
// gradiente lineal sobre relleno
// gradiente radial efecto esfera
var gradienteRadial =
contexto.createRadialGradient(160,160,1,170,150,30);
gradienteRadial.addColorStop(0, '#FFFFFF');
gradienteRadial.addColorStop(0.9, 'rgba(255,0,0,1)'); // rojo
gradienteRadial.addColorStop(1, 'rgba(255,0,0,0)'); // rojo
transparente
contexto.fillStyle = gradienteRadial;
// gradiente radial uniforme
var gradienteRadial =
contexto.createRadialGradient(280,160,1,280,160,190);
gradienteRadial.addColorStop(0, '#FFFFFF');
gradienteRadial.addColorStop(0.7, 'rgba(255,0,0,1)'); // rojo
gradienteRadial.addColorStop(1, 'rgba(255,0,0,1)'); // rojo
transparente
contexto.fillStyle = gradienteRadial;
}
</script>
</head>
</body>
</html>
III. CONCLUSIONES
Se concluye que canvas es un elemento de HTML que nos
permite dibujar, círculos, cuadrados, triangulo, rombos, arcos,
líneas, cuadrados y cualquier figura o forma que se venga a
nuestra mente de una manera sencilla y rápida usando el código
HTML.
BIBLIOGRAFIA
[1]. http://www.aulaclic.es/articulos/canvas_3.html
[2].https://developer.mozilla.org/es/docs/Web/HTML/Canvas
[3].https://developer.mozilla.org/es/docs/Web/Guide/HTML/
Canvas_tutorial

Canvas

Recomendados

Recomendados

Más contenido relacionado

Similar a Canvas

Similar a Canvas (20)

Más de Manuela Lopez Cardona

Más de Manuela Lopez Cardona (8)

Último

Último (20)

Canvas