HTML5 Cookie: canvas

Posted on April 13, 2011

0


canvas


¿Qué es un canvas?

El elemento canvas permite especificar un área de la página donde se puede, a través de scripts, dibujar y renderizar imágenes, lo que amplía notablemente las posibilidades de las páginas dinámicas y permite hacer cosas que hasta ahora estaban reservadas a los desarrolladores en Flash, con la ventaja que para usar canvas no será necesario ningún plugin en el navegador, lo que mejorará la disponibilidad de esta nueva aplicación. Realmente una propiedad muy interesante de html5.

A continuación desgloso algunas de las interesantes propiedades básicas  del canvas y lo que se puede realizar con ellas:


<!DOCTYPE HTML>

<html>

<head>

<script>

window.onload = function() {

/////////////////////////LINEA/////////////////////////////////

var canvas=document.getElementById("myCanvas");

var context=canvas.getContext("2d");

//este par de lineas rellena el espacio del canvas

context.fillStyle = '#000000';

context.fillRect( 0, 0, 200, 200 );

context.moveTo(20,150); //coordenada del canvas donde se comienza la linea. Es decir, punto inicial

context.lineTo(150,50);// punto final

context.lineWidth=15; //Grosor de la linea

context.strokeStyle="#FFFFFF"; // Color de la linea

context.lineCap = "round";//"butt" o "square". Define el estilo de la linea si es redondeada o cuadrada. tome en cuenta que al usar round o square se aumentara la longitud de la linea 5px en cada extremo

context.stroke();            //esta funcion realiza el dibujado con las caracteristicas predispuestas

////////////////////////ARCO/////////////////////////////////

var centerX = 100;

var centerY = 100;

var radius= 75;

var startingAngle = 1.1 * Math.PI;

var endingAngle = 1.9 * Math.PI;

var counterclockwise = false;

var canvas2=document.getElementById("myCanvas2");

var context2=canvas2.getContext("2d");

context2.fillStyle = '#DDDDDD';

context2.fillRect( 0, 0, 200, 200 );

//la fucion arc toma un punto seleccionado de un eje de coordenadas

//a partir del cual se barre el angulo desde un punto de partida y

//radio determinado hasta un angulo final, en sentido horario o anti horario

//los angulos son medidos a base de PI, siendo PI 180 grados y 2PI 360 grados...

context2.arc(centerX,centerY, radius, startingAngle, endingAngle,counterclockwise);

context2.lineWidth=15;

context2.strokeStyle="#000000"; // color de linea

context2.stroke();

////////////////////CURVA CUADRATICA///////////////////////////////

var canvas3=document.getElementById("myCanvas3");

var context3=canvas3.getContext("2d");

context3.fillStyle = '#000000';

context3.fillRect( 0, 0, 200, 200 );

context3.moveTo(20,100); //context point, el comienzo de la curva

context3.quadraticCurveTo(50 /*la coordenada x del punto de control de la curva cuadratica*/

, 0 /*la coordenada y del punto de control de la curva cuadratica*/

, 70 /*la coordenada x del punto final de la curva */

, 150 /*la coordenada x del punto final de la curva */);

context3.lineWidth=10;

context3.strokeStyle="#FFFFFF"; // line color

context3.stroke();

///////////////////////CURVA BEZIER///////////////////////////////

var canvas4=document.getElementById("myCanvas4");

var context4=canvas4.getContext("2d");

context4.fillStyle = '#DDDDDD';

context4.fillRect( 0, 0, 200, 200 );

//context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

context4.moveTo(50,180); //context point, el inicio de la curva, el punto por la cual es definida

context4.bezierCurveTo(140, 80, 200, 80, 180, 170);

context4.lineWidth=10;

context4.strokeStyle="000000"; // COLOR DE LINEA

context4.stroke();

///////////////////////CAMINO//////////////////////////////////////

var canvas5=document.getElementById("myCanvas5");

var context5=canvas5.getContext("2d");

context5.fillStyle = '#000000';

context5.fillRect( 0, 0, 200, 200 );

context5.beginPath(); //nos permite dibujar circuitos mezclados de los puntos anriormente explicados

context5.moveTo(10,20);

context5.lineTo(40,160); // linea 1

context5.quadraticCurveTo(70, 230, 80,150); // curva cuadratica

context5.bezierCurveTo(100, -40, 120, 50, 150, 50); // curva bezier

context5.lineTo(500, 90); // linea 2

context5.lineWidth=5;

context5.strokeStyle="#FFFFFF";

context5.stroke();

//////////////////////UNION DE LINEAS////////////////////////////

var canvas6=document.getElementById("myCanvas6");

var context6=canvas6.getContext("2d");

context6.fillStyle = 'rgb(255,255,0)';

context6.fillRect( 0, 0, 200, 200 );

context6.beginPath();

context6.moveTo(canvas.width/2-50,canvas.height-50); // line 1

context6.lineTo(canvas.width/2,50); // line 1

context6.lineTo(canvas.width/2+50,canvas.height-50); // line 1

context6.lineWidth=25;

context6.lineJoin="round"; //estilos predefinidos: miter (puntiagudo) , round (redondo) o bevel (cortado a cuadricula)

context6.stroke();

///////////////////////BORDES REDONDEADOS//////////////////////

var canvas7=document.getElementById("myCanvas7");

var context7=canvas7.getContext("2d");

var rectWidth = 150;

var rectHeight = 100;

var rectX = canvas.width/2 - rectWidth/2;

var rectY = canvas.height/2 - rectHeight/2;

var cornerRadius = 50;

context7.fillStyle = 'DDDDDD';

context7.fillRect( 0, 0, 400, 400 );

context7.beginPath();

context7.moveTo(rectX,rectY);

context7.lineTo(rectX+rectWidth-cornerRadius,rectY);

//context.arcTo(controlX,controlY,endX,endY,radius);

//Es decir, toma el punto inicial y final de una recta

//y la barre en un angulo de 90 grados en la mitad de su longitud

context7.arcTo(rectX+rectWidth,rectY,

rectX+rectWidth,rectY+cornerRadius,

cornerRadius);

context7.lineTo(rectX+rectWidth,rectY+rectHeight);

context7.strokeStyle="#000000";

context7.lineWidth=5;

context7.stroke();

/////////////////////////FORMA PERSONALIZADA///////////////////////

var canvas8=document.getElementById("myCanvas8");

var context8=canvas8.getContext("2d");

context8.fillStyle = '#000000';

context8.fillRect( 0, 0, 200, 200 );

context8.beginPath(); // Comienzo del dibujo libre

context8.moveTo(70,80);

context8.bezierCurveTo(30, 100, 30, 150, 130, 150);

context8.bezierCurveTo(100, 5,50, 20, 70, 80);

context8.closePath(); // Fin del dibujo libre

/*

var grd=context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);

grd.addColorStop(offset, color);

como su nombre lo indica rellena la figura con un degradado multicolor

*/

var grd=context8.createRadialGradient(50,100,10,238,50,200);

grd.addColorStop(0,"black");

grd.addColorStop(0.17,"gray");

grd.addColorStop(0.33,"yellow");

context8.fillStyle=grd;

context8.fill();

context8.lineWidth=5;

context8.strokeStyle="#ffffff";

context8.stroke();

/////////////////////////RELLENO DE FIGURAS///////////////////

var canvas9=document.getElementById("myCanvas9");

var context9=canvas9.getContext("2d");

context9.fillStyle = '#DDDDDD';

context9.fillRect( 0, 0, 200, 200 );

context9.beginPath(); // Comienzo del dibujo libre

context9.moveTo(70,80);

context9.bezierCurveTo(30, 100, 30, 150, 130, 150);

context9.bezierCurveTo(150, 180, 190, 180, 190, 150);

context9.bezierCurveTo(100, 5,50, 20, 70, 80);

context9.closePath(); // Comienzo del dibujo libre

//rellena el interior de una forma

context9.fillStyle="#DDDDDD";

context9.fill();

context9.lineWidth=5;

context9.strokeStyle="#000000";

context9.stroke();

///////////////////////DIBUJO DE FORMA CUADRADA///////////////

var canvas10=document.getElementById("myCanvas10");

var context10=canvas10.getContext("2d");

context10.fillStyle = '#000000';

context10.fillRect( 0, 0, 200, 200 );

var topLeftCornerX = 25;

var topLeftCornerY = 25;

var width = 150;

var height = 100;

context10.beginPath();

//muy sencillo, tomando un punto de coordenadas que se convertira

//la esquina superior izquierda de la forma cuadrada, se ejecuta

//el dibujado definiendo el ancho y alto en pixeles

context10.rect(topLeftCornerX,topLeftCornerY,width,height);

context10.fillStyle="#000000";

context10.fill();

context10.lineWidth=5;

context10.strokeStyle="FFFFFF";

context10.stroke();

///////////////////////CIRCULO/////////////////////////////////////

var canvas11=document.getElementById("myCanvas11");

var context11=canvas11.getContext("2d");

context11.fillStyle = '#DDDDDD';

context11.fillRect( 0, 0, 200, 200 );

var centerX = 100;

var centerY = 100;

var radius = 50;

context11.beginPath();

//ver ARCO

context11.arc(centerX,centerY,radius,0, 2*Math.PI,false);

//creado de degrado linear en base a dos colores

var grd=context11.createLinearGradient(230,0,370,200);

grd.addColorStop(0,"#000000");

grd.addColorStop(1,"#FFFFFF");

context11.fillStyle=grd;

context11.fill();

context11.lineWidth=5;

context11.strokeStyle="#888888";

context11.stroke();

/////////////////////////SEMICIRCULO/////////////////////////////

var canvas12=document.getElementById("myCanvas12");

var context12=canvas12.getContext("2d");

context12.fillStyle = '#000000';

context12.fillRect( 0, 0, 400, 400 );

var centerX = 100;

var centerY = 100;

var radius = 50;

context12.beginPath();

//ver ARCO

context12.arc(centerX,centerY,radius,0, Math.PI,false);

context12.closePath();

context12.fillStyle="#000000";

context12.fill();

context12.lineWidth=5;

context12.strokeStyle="#FFFFFF";

context12.stroke();

}

</script>

</head>

<body>

<canvas id="myCanvas"  width="200" height="200"></canvas>

<canvas id="myCanvas2"  width="200" height="200"></canvas>

<canvas id="myCanvas3"  width="200" height="200"></canvas>

<canvas id="myCanvas4"  width="200" height="200"></canvas>

<canvas id="myCanvas5"  width="200" height="200"></canvas>

<canvas id="myCanvas6"  width="200" height="200"></canvas>

<canvas id="myCanvas7"  width="200" height="200"></canvas>

<canvas id="myCanvas8"  width="200" height="200"></canvas>

<canvas id="myCanvas9"  width="200" height="200"></canvas>

<canvas id="myCanvas10"  width="200" height="200"></canvas>

<canvas id="myCanvas11"  width="200" height="200"></canvas>

<canvas id="myCanvas12"  width="200" height="200"></canvas>

</body>

</html>

La ejecución del código mostrado en un browser

Posted in: Code