<canvas></canvas>
Los atributos permitidos son "width" y "height", de forma predeterminada tiene un tamaño de 300 x 150 pixels.
<canvas width="500" height="300"></canvas>
Nota: Asignar el tamaño de canvas mediante CSS distorsiona los gráficos de su interior.
El contenido que se añada dentro de canvas se puede utilizar como contenido alternativo para los navegadores que no lo soporten.
<canvas width="500" height="300">Texto alternativo para navegadores antiguos</canvas>
Empezar a dibujar
Mediante una función javascript y el método "getContext" prepararemos el elemento "canvas" para crear gráficos en su interior.var canvas = document.getElementById('dibujo').getContext('2d');
Ejemplo:
<html>
<head>
<script>
function dibujar(){
var canvas = document.getElementById('dibujo').getContext('2d');
}
<script>
</head>
<body onload="dibujar();">
<canvas id="dibujo"></canvas>
</body>
Para generar los diferentes
gráficos iremos añadiendo las funciones que los crean de esta manera:
function dibujo(){
var canvas = document.getElementById("dibujo").getContext('2d');
//grafico 1
canvas.fillRect(10,10,100,100);
//grafico 2
canvas.fillRect(50,50,100,50);
}
Dibujar cuadrados y rectángulos
Se pueden crear 3 tipos distintos de rectángulos:fillRect(x,y,ancho,alto) - Rectángulo
strokeRect(x,y,ancho,alto) - Borde rectangular
clearRect(x,y,ancho,alto) - Agujero rectangular
Hay que definir la posición x, y, el ancho y el alto. Por defecto la posición es respecto a la esquina superior izquierda.
Ejemplo:
function dibujo(){
var canvas = document.getElementById("dibujo").getContext('2d');
//grafico 1
canvas.strokeRect(10,10,100,100);
//grafico 2
canvas.fillRect(50,50,100,50);
//grafico 23
canvas.clearRect(55,55,30,30);
}
Resultado:
Entradas
No hay comentarios:
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.