1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
---
title: Uso básico de Canvas
slug: Web/API/Canvas_API/Tutorial/Basic_usage
translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
original_slug: Web/Guide/HTML/Canvas_tutorial/Basic_usage
---
<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Dibujando_formas")}}</div>
<div class="summary">
<p>Comenzamos este tutorial observando el elemento {{HTMLElement("canvas")}}. Al final de esta página, sabrás como configurar el entorno 2D de canvas y habrás dibujado el primer ejemplo en tu navegador.</p>
</div>
<h2 id="El_elemento_<canvas>">El elemento <code><canvas></code></h2>
<pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas>
</pre>
<p>A primera vista, un elemento {{HTMLElement("canvas")}} es parecido al elemento {{HTMLElement("img")}}, con la diferencia que este no tiene los atributos <code>src</code> y <code>alt</code>. El elemento <code><canvas></code> tiene solo dos atributos - {{htmlattrxref("width", "canvas")}} y {{htmlattrxref("height", "canvas")}}. Ambos son opcionales y pueden ser definidos usando propiedades <a href="/en-US/docs/DOM" rel="internal" title="en/DOM">DOM</a>. Cuando los atributos ancho y alto no estan especificados, el lienzo se inicializara con <strong>300 pixels</strong> ancho y <strong>150 pixels</strong> de alto. El elemento puede ser arbitrariamente redimensionado por CSS, pero durante el renderizado la imagen es escalada para ajustarse al tamaño de su layout. Si el tamaño del CSS no respeta el ratio del canvas inicial, este aparecerá distorsionado.</p>
<div class="note">
<p><strong>Nota:</strong> Si su renderizado se ve distorsionado, pruebe especificar los atributos width y height explícitamente en los atributos del <code><canvas></code> , y no usando CSS.</p>
</div>
<p>El atributo <a href="/es/docs/Web/HTML/Atributos_Globales/id">id</a> no está especificado para el elemento <code><canvas></code> pero es uno de los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales de HTML</a> el cual puede ser aplicado a cualquier elemento HTML (como <a href="en-US/docs/Web/HTML/Global_attributes/class">class</a> por ejemplo). Siempre es buena idea proporcionar un <code>id</code> porque esto hace más fácil identificarlo en un script.</p>
<p>El elemento <code><canvas></code> puede ser estilizado como a cualquier imagen normal (margin, border, background, etc). Estas reglas, sin embargo, no afectan a lo dibujado sobre el canvas. Mas adelante veremos cómo se hace esto en un <a href="en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">capítulo dedicado</a> en este tutorial. Cuando no tenemos reglas de estilo aplicadas al canvas, este será completamente transparente.</p>
<div id="section_2">
<h3 id="Contenido_alternativo">Contenido alternativo</h3>
<p>El elemento <canvas> se diferencia de un tag {{HTMLElement("img")}} en que, como los elementos {{HTMLElement("video")}}, {{HTMLElement("audio")}} o {{HTMLElement("picture")}}, es fácil definir contenido alternativo (fallback content) para mostrarse en navegadores viejos que no soporten el elemento <canvas>, como versiones de Internet Explorer previas a la versión 9 o navegadores de texto. Siempre debes proporcionar contenido alternativo para mostrar en estos navegadores.</p>
<p>Proporcionar contenido alternativo es muy explicito: solo debemos insertar el contenido alterno dentro del elemento <canvas>. Los navegadores que no soporten <code><canvas></code> ignoraran el contenedor y mostrarán el contenido indicado dentro de este. Navegadores que soporten <code><canvas></code> ignorarán el contenido en su interior (de las etiquetas), y mostrarán el canvas normalmente.</p>
<p>Por ejemplo, podremos proporcionar un texto descriptivo del contenido del canvas o proveer una imagen estática del contenido rederizado. Nos podría quedar algo así:</p>
<pre class="brush: html"><canvas id="stockGraph" width="150" height="150">
current stock price: $3.15 +0.15
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>
</pre>
<h2 id="Etiqueta_<canvas>_requerida">Etiqueta <code></canvas></code> requerida</h2>
<p>De manera distinta al elemento {{HTMLElement("img")}}, el elemento {{HTMLElement("canvas")}} requiere cerrar la etiqueta (<code></canvas></code>).</p>
<div class="note">
<p><strong>Note:</strong> Aunque las versiones anteriores del navegador Safari de Apple no requeria el cierre de la etiqueta, la especificacion indica que es necesaria, asi que tu deberias incluir esta para asegurarte la compatibilidad. Aquellas versiones de Safari (anteriores versiones a 2.0) renderizaran el contenido de regreso agregandolo al canvas mismo a no ser que utilice trucos de CSS para enmascararlo. Afortunadamente, los usuarios de aquellas versiones de Safari son raros hoy en dia.</p>
</div>
<p>Si el contenido alternativo no se necesita, un simple <code><canvas id="foo" ...></canvas></code> es completamente compatible con todos los navegadores que soportan canvas.</p>
<h2 id="El_contexto_de_renderización">El contexto de renderización</h2>
<p>{{HTMLElement("canvas")}} crea un lienzo de dibujo fijado que expone uno o mas contextos renderizados, los cuales son usados para crear y manipular el contenido mostrado. Nos enfocaremos en renderizacion de contextos 2D. Otros contextos deberan proveer diferentes tipos de renderizaciones; por ejemplo, <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> usa un 3D contexto ("experimental-webgl") basado sobre <a class="external" href="http://www.khronos.org/opengles/" rel="external">OpenGL ES</a>.</p>
<p>El canvas esta inicialmente en blanco. Para mostrar alguna cosa, un script primero necesita acceder al contexto a renderizar y dibujar sobre este. El elemento {{HTMLElement("canvas")}} tiene un <a href="/en-US/docs/Web/API/HTMLCanvasElement#Methods" title="/en-US/docs/Web/API/HTMLCanvasElement#Methods">method</a> llamado <code>getContext()</code>, usado para obtener el contexto a renderizar y sus funciones de dibujo. <code>getContext()</code> toma un parametro, el tipo de contexto. Para graficos 2D, como los que cubre este tutorial, su especificacion es "2d".</p>
<pre class="brush: js">var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
</pre>
<p>La primera linea regresa el nodo DOM para el elemento {{HTMLElement("canvas")}} llamando al metodo {{domxref("document.getElementById()")}}. Una vez tu tienes el elemento nodo, tu puedes acceder al contexto de dibujo usando su metodo <code>getContext()</code>.</p>
<div id="section_5">
<h2 id="Comprobando_soporte">Comprobando soporte</h2>
<p>El contenido de regreso que es mostrado en navegadores los cuales no soportan {{HTMLElement("canvas")}}. Para los Scripts puede tambien comprobarse su soporte desde la programacion por un simple test para la presencia del metodo <code>getContext()</code>. Con un trozo de codigo parecido al que viene debajo:</p>
<pre class="brush: js">var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
</pre>
</div>
</div>
<h2 id="Un_esqueleto_de_plantilla">Un esqueleto de plantilla</h2>
<p>Aqui esta una plantilla minimalista, la cual usaremos como punto de partida para posteriores ejemplos.</p>
<pre class="brush: html"><html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
</pre>
<p>El script incluye una funcion llamada draw(), la cual es ejecutada una vez finalizada la carga de la pagina; este esta hecho usando el evento load del documento. Esta funcion, o una parecida, podria tambien ser llamada usando {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, o cualquier otro manejador de evento, a lo largo de que la pagina esta siendo cargada la primera vez.</p>
<p>Aqui esta como la plantilla se ve en acción:</p>
<p>{{EmbedLiveSample("Un_esqueleto_de_plantilla", 160, 160)}}</p>
<h2 id="Un_simple_ejemplo">Un simple ejemplo</h2>
<p>Para comenzar, daremos un vistazo a un simple ejemplo que dibuja dos rectangulos que se intersectan, uno de los cuales tiene alpha transparencia. Exploraremos como esto trabaja en mas detalle en posteriores ejemplos.</p>
<pre class="brush: html"><html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
</pre>
<p>Este ejemplo quedaría así:</p>
<p>{{EmbedLiveSample("Un_simple_ejemplo", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Dibujando_formas")}}</p>
|
