Descripción: Funciones para crear imágenes svg y canvas.
A continuación mostramos los apuntes asociados a este extra:
// 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 87 ocasiones.
Esta extra aún no tiene comentarios.
Valoración de esta página: (extra.script.svg_canvas)
Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024 | Otros enlaces: buscador