⇪

Placa metálica

facebook-svg gplus-svg twitter-svg

A continuación vamos a dibujar un patrón que imita el aspecto de una placa metálica perforada.
Empezamos definiendo el radio del circulo imaginario que contiene el "agujero".

var R = 8;
el diámetro del agujero será:
var D = 2*R;

Para unas juntas perfectas y sin costuras recalculamos el tamaño del <canvas>. Tanto el ancho como el alto del <canvas> tiene que ser un múltiplo del diámetro. Para esto echamos mano de Math.round que redondea un número al entero más cercano.

canvas.width = Math.round( canvas.width/D )*D;
canvas.height = Math.round( canvas.height/D )*D;

Ahora que tenemos todo esto definido podemos dibujar la placa base que será un rectángulo del tamaño del <canvas>. Como fondo ( fillStyle ) utilizamos un gradiente radial creado con createRadialGradient().
A continuación podemos dibujar los "agujeros".
Para esto utilizamos un bucle for (for loop) para distribuir los agujeros en una fila horizontal:

for( var j = R; j < W*1.1; j+= D ){ ...
donde W = canvas.width.
Utilizamos W*1.1 para no quedarnos con huecos en los bordes del canvas.

Empleamos otro bucle for (for loop ) para perforar varias filas de agujeros.

for( var i = 0; i < H*1.1; i+= D ){ ...
donde H = canvas.height.

Tenemos que tener en cuenta que cada segunda fila tendrá un desplazamiento lateral offset = R.
También haremos que el radio del "agujero" sea un poco mas pequeño que R (R-1)

Su navegador no soporta canvas :( 

var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
  var ctx = canvas.getContext("2d");
  if (ctx) {
    var R = 8; // el radio
    var D = R * 2; // el diámetro

    // para unas juntas perfectas y sin costuras recalculamos el tamaño del canvas
    // tanto el ancho como el alto del canvas tiene que ser un múltiplo del diámetro
    var W = Math.round(canvas.width / D) * D;
    var H = Math.round(canvas.height / D) * D;

    canvas.width = W;
    canvas.height = H;

    // Dibujamos un rectangulo de fondo
    // crea un gradiente radial
    var grd = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, W / 2);
    grd.addColorStop(0, "#888");
    grd.addColorStop(1, "#222");
    // asigna el gradiente
    ctx.fillStyle = grd;
    // dibuja el rectángulo;
    ctx.fillRect(0, 0, W, H);

    // dibujamos los agujeros
    ctx.fillStyle = "#111";
    // el desplazamiento lateral = 0
    var offset = 0;
    for (var i = 0; i < H * 1.1; i += D) {
      offset = 0; // a cada ciclo reiniciamos el desplazamiento lateral
      for (var j = 0; j < W * 1.1; j += D) {
        // cada segunda hilera tendrá un desplazamiento lateral = R
        offset = (offset == 0) ? R : 0;
        // dibuja el agujero 1px menos (R-1)
        ctx.beginPath();
        ctx.arc(j, i + offset, R - 1, 0, 2 * Math.PI); //R en lugar de R-1;
        ctx.fill();
      }
    }
  }
}
Su navegador no soporta canvas :(

Para recuperar la imagen utilice toDataURL
Nota: Firefox nos permite abrir y guardar la imagen generada haciendo clic con el botón derecho del ratón, y escogiendo la opción deseada.

var url = canvas.toDataURL();