Html5 botones para compartir

No se asusten :) !!, hemos añadido unas botoneras creadas con Mocanvas, para incrementar la interacción social y para apoyar este fabuloso proyecto en html5.

Mocanvas

Mocanvas

Mocanvas genera un canvas con diferentes objetos moviéndose por su espacio, cada uno prestando alguno de los principales servicios para compartir contenido además de contar los usuarios conectados.

Si quieres unos botones para compartir como los del blog sólo tienes que acceder al generador:

Botones para compartir

 

HTML5 canvas imágenes

Para dibujar una imagen con html5 usaremos el método drawImage(), el cual requiere un objeto imagen y los puntos de dibujo, estos puntos nos dan las coordenadas donde será representada sobre el canvas:

<script>
contexto.drawImage(imageObjeto, x, y);
</script>

HTML5 canvas ejemplo pintando una imagen.

Para usar este ejemplo descargaté la imagen:

HTML5

HTML5

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#miCanvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<canvas id=”miCanvas” width=”578″ height=”400″></canvas>
<script>
var canvas = document.getElementById(‘miCanvas’);
var contexto = canvas.getContext(’2d’);
var imageObjeto= new Image();

imageObjeto.onload = function() {
contexto.drawImage(imageObjeto, 69, 50);
};
imageObjeto.src = ‘HTML5.png‘;
</script>
</body>
</html>

HTML5 canvas Pattern (Patrones)

Para crear un patrón con html5 deberemos usar el método createPattern(), esto nos regresará un patrón como objeto. Se establecerá el estilo de llenado fillStyle() y luego se usará con fil().

El método createPattern() requiere de una imagen y unos atributos de repetición, que definiremos con repeat, repeat-x, repeat-y o no-repeat. La opción por defecto es repeat.

html5 pattern

html5 pattern

Imagen que usaremos de patrón, descargala:

Patrón madera

Patrón madera

Código de ejemplo:

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#miCanvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<canvas id=”miCanvas” width=”578″ height=”200″></canvas>
<script>
var canvas = document.getElementById(‘miCanvas’);
var context = canvas.getContext(’2d’);

var imageObj = new Image();
imageObj.onload = function() {
var pattern = context.createPattern(imageObj, ‘repeat’);

context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = pattern;
context.fill();
};
imageObj.src = ‘patron-madera.png’;
</script>
</body>
</html>

HTML5 canvas Degradado Radial

Para crear un degradado radial con html5 deberemos usar el método createRadialGradient().  Este tipo de degradado está definido por dos círculos imaginarios. Un círculo de partida y un círculo de final, en el que el gradiente empieza con el círculo de inicio y se mueve hacia el círculo final.

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

Ejemplo:

Html5 degradado radial

Html5 degradado radial

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id=”miCanvas” width=”578″ height=”200″></canvas>
<script>
var canvas = document.getElementById(‘miCanvas‘);
var contexto = canvas.getContext(’2d’);
contexto.rect(0, 0, canvas.width, canvas.height);

// Degradado radial
var grd = contexto.createRadialGradient(238, 50, 10, 238, 50, 300);
// Verde claro
grd.addColorStop(0, ‘#8ED6FF’);
// Azul oscuro
grd.addColorStop(1, ‘#004CB3′);
contexto.fillStyle = grd;
contexto.fill();
</script>
</body>
</html>

HTML5 Canvas: degradado lineal

Para crear un degradado lineal con el Canvas de HTML5 , podemos usar el método the createLinearGradient() . Los degradados lineales están definidos por una línea imaginaria la cual define la dirección del degradado. Una vez creado nuestro degradado podemos añadir colores usando lapropiedad addColorStop .

La dirección del degradado lineal se mueve desde un punto de inicio hasta un punto final de una línea imaginaria definida con createLinearGradient()

En este tutorial usaremos dos colores un azul brillante en el origen y un azul oscuro al final. Las pausas de color  están colocadas a lo largo de la línea imaginaria entre 0 y 1 siendo 0 el punto de origen y 1 el final.

html5 degradado lineal

html5 degradado lineal

Código javascript y html5:

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#miCanvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<canvas id=”miCanvas” width=”578″ height=”200″></canvas>
<script>
var canvas = document.getElementById(‘miCanvas‘);
var context = canvas.getContext(’2d’);
context.rect(0, 0, canvas.width, canvas.height);

// Añadiendo degradado lineal
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
// azul brillante
grd.addColorStop(0, ‘#8ED6FF’);
// azul oscuro
grd.addColorStop(1, ‘#004CB3′);
context.fillStyle = grd;
context.fill();
</script>
</body>
</html>

 

HTML5 Canvas: Círculos con html5 Tutorial

Para dibujar un círculo en el canvas de html5 podemos hacerlo usando el método arc(), definiendo el ángulo de inicio como 0 y el ángulo final como 2 * PI.

<script>
context.arc(x, y, radius, 0 , 2 * Math.PI, false);
</script>

Ejemplo de círculo con html5:

html5 círculo

html5 círculo

Página completa cargando un círuclo en html:

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById(‘miCanvas’);
var context = canvas.getContext(’2d’);
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = ‘#8ED6FF’;
context.fill();
context.lineWidth = 5;
context.strokeStyle = ‘black’;
context.stroke();
};

</script>
</head>
<body>
<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
</body>
</html>

HTML5 Canvas: Rectángulos con html5 Tutorial

Rectángulos en html5

Para crear un rectángulo en html5 podemos usar el método rect(). El rectángulo es posicionado en el canvas por las variables x e y, y su tamaño por width y height. Recuerde que la posición se inicia en la esquina superior izquierda.

<script>
context.rect(x, y, width, height);
</script>

html5 rectangulo

html5 rectangulo

Código rectángulo en html5:

<!DOCTYPE HTML>
<html>
<head>
<style>
#myCanvas {
border: 2px solid #9C9898;
}
body {
margin: 0px;
padding: 0px;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById(‘miCanvas’);
var context = canvas.getContext(’2d’);

context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = ‘#8ED6FF’;
context.fill();
context.lineWidth = 5;
context.strokeStyle = ‘black’;
context.stroke();
};

</script>
</head>
<body>
<canvas id=”miCanvas” width=”578″ height=”200″></canvas>
</body>
</html>

HTML5 Canvas: Rellenar superficia con color Tutorial

Ahora que ya sabemos dibujar figuras no estaría nada mal aplicarles color, para ello usaremos el método fill() y la propiedad fillStyle para definir el color. Si no definimos ningún color, por defecto se pintará de negro.

context.fillStyle=[Valor];
context.fill();

* Si usa el método fill() combinado con stroke(), recuerde que debe usar antes fill(), sino

html5 canvas figuras color

html5 canvas figuras color

 

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById(“miCanvas”);
var context = canvas.getContext(“2d”);

// begin custom shape
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);

// complete custom shape
context.closePath();
context.lineWidth = 5;
context.fillStyle = “#8ED6FF“;
context.fill();
context.strokeStyle = “blue”;
context.stroke();
};

</script>
</head>
<body>
<canvas id=”miCanvas” width=”578″ height=”200″></canvas>
</body>
</html>

HTML5 Canvas: Tutorial formas aleatorias

Para crear en html5 una figura personalizada, podemos hacer un camino con lo aprendido hasta ahora y luego cerrarlo con el método closePath(). Para crear cada parte de la figura usaremos los métodos para dibujar líneas lineTo(), arcTo(), quadraticCurveTo() o bezierCurveTo().

context.closePath();

Ejemplo de figura creada con closePath() y Html5 Canvas

html5 canvas figuras

html5 canvas figuras

El código fuente de la figura generada:

window.onload = function() {
var canvas = document.getElementById(“miCanvas”);
var context = canvas.getContext(“2d”);

// Empezamos con la figura
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);

// Terminamos la figura usamos closePath para que se dibuje
context.closePath();
context.lineWidth = 5;
context.strokeStyle = “#0000ff”;
context.stroke();
};

HTML5 Canvas: Esquinas redondeadas tutorial.

Esquinas redondas en html5

Para crear las esquinas redondeadas usando HTML5 Canvas, podemos usar el método arcTo(), que se define por un punto de control, un punto final, y un radio.

context.arcTo(controlX,controlY,finX,finY,radio);

Ejemplo de arco en el canvas de html5

html5-canvas-arcto

Esquina redondeada con arcTo en html5

Código del ejemplo de esquina redonda

window.onload = function(){
var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);

var rectWidth = 200;
var rectHeight = 100;
var rectX = canvas.width / 2 – rectWidth / 2;
var rectY = canvas.height / 2 – rectHeight / 2;

var radioEsquina= 50;

context.beginPath();
context.moveTo(rectX, rectY);
context.lineTo(rectX + rectWidth – radioEsquina, rectY);
context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth,
rectY + radioEsquina, radioEsquina);
context.lineTo(rectX + rectWidth, rectY + rectHeight);

context.lineWidth = 5;
context.stroke();
};