logoExtra: script.svg_canvas

Descripción: Funciones para crear imágenes svg y canvas.


A continuación mostramos los apuntes asociados a este extra:

Polígonos: svg vs. canvas
Vamos a empezar con la imagen que vemos a nuestra derecha, que ya nos ha servido en el apunte: SVG: Preliminares para iniciar una serie de apuntes sobre este formato vectorial.
// Descripción para sindicación
/*
    [rss]Funciones para crear imágenes svg y canvas.[/rss]
*/
var xmlns = "http://www.w3.org/2000/svg";

function generar_svg_path()    {
    tag_svg = document.createElementNS(xmlns, "svg");
    tag_svg.style.width = "300px";
    tag_svg.style.height = "100px";
    tag_svg.style.border = "1px solid black";
    for (i = 0, ti = formas.length; i < ti; i++)    {
        puntos = formas[i].puntos.split(",");
        y = puntos.pop();
        x = puntos.pop();
        path = ["M " + x + " " + y];
        while(puntos.length > 0) {
            y = puntos.pop();
            x = puntos.pop();
            path.push("L " + x + " " + y);
        }
        path.push("Z");
        tag_path = document.createElementNS(xmlns, "path");
        tag_path.setAttributeNS(null, "fill", formas[i].color);
        tag_path.setAttributeNS(null, "d", path.join(" "));
        tag_svg.appendChild(tag_path);
    }
    tag("espacio_svg_path").appendChild(tag_svg);
    this.disabled = true;
}

function generar_canvas()    {
    tag_canvas = document.createElement("canvas");
    tag_canvas.width = "300";
    tag_canvas.height = "100";
    tag_canvas.style.border = "1px solid black";
    for (i = 0, ti = formas.length; i < ti; i++)    {
        forma = tag_canvas.getContext("2d");
        forma.fillStyle = formas[i].color;
        puntos = formas[i].puntos.split(",");
        y = puntos.pop();
        x = puntos.pop();
        forma.beginPath();
        forma.moveTo(x, y);
        while(puntos.length > 0) {
            y = puntos.pop();
            x = puntos.pop();
            forma.lineTo(x, y);
        }
        forma.closePath();
        forma.fill();
    }
    tag("espacio_canvas").appendChild(tag_canvas);
    this.disabled = true;
}

function generar_svg()    {
    tag_svg = document.createElementNS(xmlns, "svg");
    tag_svg.style.width = "300px";
    tag_svg.style.height = "100px";
    tag_svg.style.border = "1px solid black";
    for (i = 0, ti = formas.length; i < ti; i++)    {
        tag_polygon = document.createElementNS(xmlns, "polygon");
        tag_polygon.setAttributeNS(null, "fill", formas[i].color);
        tag_polygon.setAttributeNS(null, "points", formas[i].puntos);
        tag_svg.appendChild(tag_polygon);
    }
    tag("espacio_svg").appendChild(tag_svg);
    this.disabled = true;
}

formas = [
    {"color": "blue", "puntos": "29,8,29,30,8,30,8,8"},
    {"color": "red", "puntos": "82,7,85,7,86,6,86,7,88,9,88,10,90,12,90,13,91,14,91,15,93,17,93,18,95,20,95,21,97,23,97,24,93,28,93,29,88,34,88,35,84,39,83,39,82,38,80,38,79,37,77,37,76,36,75,36,74,35,72,35,71,34,70,34,69,33,67,33,66,32,65,32,65,25,66,24,66,12,67,11,70,11,71,10,74,10,75,9,77,9,78,8,81,8"},
    {"color": "yellow", "puntos": "143,59,144,59,145,60,146,60,147,61,148,61,149,60,151,60,152,59,153,59,154,58,155,58,166,47,166,46,168,44,168,43,169,42,169,40,171,38,171,35,172,34,172,33,173,32,173,31,174,30,174,26,175,25,175,24,177,22,177,19,178,18,178,17,179,16,179,15,183,11,183,10,184,10,185,9,191,9,194,12,194,18,193,19,193,20,191,22,191,23,189,25,189,28,188,29,188,30,186,32,186,34,185,35,185,37,184,38,184,40,183,41,183,43,182,44,182,45,181,46,181,47,180,48,180,49,179,50,179,51,178,52,178,53,177,54,177,55,174,58,174,59,166,67,165,67,164,68,162,68,161,69,160,69,159,70,158,70,155,73,143,73,141,71,139,71,138,70,136,70,135,69,134,69,133,68,132,68,130,66,130,64,129,63,129,62,128,61,128,60,127,59,127,41,128,40,128,39,129,38,129,37,131,35,131,34,133,32,134,32,135,31,137,31,138,30,140,30,141,29,150,29,151,30,152,30,152,31,153,32,153,38,151,40,146,40,145,41,144,41,140,45,140,46,139,47,139,53,140,54,140,56"},
    {"color": "lime", "puntos": "206,49,207,50,209,50,213,54,213,56,214,57,214,62,213,63,213,65,209,69,207,69,206,70,201,70,200,69,198,69,194,65,194,63,193,62,193,57,194,56,194,54,198,50,200,50,201,49"}
]

function inicio() {
    poner_evento(tag("generador_svg"), "click", generar_svg);
    poner_evento(tag("generador_svg_path"), "click", generar_svg_path);
    poner_evento(tag("generador_canvas"), "click", generar_canvas);
    tag("generador_svg").disabled = false;
    tag("generador_svg_path").disabled = false;
    tag("generador_canvas").disabled = false;
}

poner_evento(window, "load", inicio);

Este código ha sido leído en 61 ocasiones.

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.script.svg_canvas) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018 | Otros enlaces: buscador