Javascript

Cabecera

Incluir en la cabecera

	<script type="text/javascript" src="archivo.js"></script>
	

Funciones útiles

Ejecutar tras la carga del DOM


	document.addEventListener('DOMContentLoaded', function(){ 
		// Tu código aquí
	}, false);
	
Detener el hilo de ejecución por un tiempo

	function sleep(ms) {
		return new Promise(resolve => setTimeout(resolve, ms));
	}

	async function myFunción(){
		await sleep(100);
	}
	

SVG

La librería Svg completa

Crear el objeto

Contenedor del lienzo en el html será


		<svg id="canvas1" width="800px" height="500px">
	

	// Ejemplo para crear el lienzo en javascript
	async function main(){
		s = new Svg("canvas1", 800, 500);
		s.drawAxis();
		s.drawGrid();
	}
	
Dibujar objetos en el lienzo
	
	// Prototipos de métodos de la clase Svg
	addCircle(circleId, cx, cy, r, fillColor, strokeWidth = 0, strokeColor = null);
	addLine(lineId, x0, y0, x1, y1, color, width);
	
En este ejemplo se crea un punto llamado p1 en las coordenadas x, y de radio 4 y de color rojo

	s.addCircle("p1", x, y, 4, "red");
	

Mover dos puntos asincrónicamente. Uno se moverá en círculos y el otro en línea recta


	var o1, o2;
	function sleep(ms) {
		return new Promise(resolve => setTimeout(resolve, ms));
	}

	async function mover1(){
		for(var i=0; i<200; i+=0.1){
			var p = 50*Math.sin(i/10.0);
			o1.setAttribute("cx", s.px(50*Math.cos(i/10.0)));
			o1.setAttribute("cy", s.py(50*Math.sin(i/10.)));
			await sleep(1);
			console.log("1");
		}
	}

	async function mover2(){
		for(var i=0; i<100; i++){
			console.log("2");
			o2.setAttribute("cx", s.px(-i));
			await sleep(100);
			console.log("2");
		}
	}

	document.addEventListener('DOMContentLoaded', function(){ 
		s = new Svg("canvas1", 800, 500);
		s.drawAxis();
		s.drawGrid();
		o1  = s.addCircle("c1", 0, 0, 5, "red");
		o2  = s.addCircle("c2", 0, 0, 5, "blue");

		mover1();
		mover2();

	}, false);