Saludos. Pimero les diré que es lo que quiero lograr hacer y después les postearé el código.
Lo que quiero hacer es que la pantalla aparezca en blanco. Entonces cuando le de un click en cualquier lado de la pantalla me aparezca un circulo de tamaño random y color random. Después cuando le de otro click en otro lado de la pantalla aparezca otro circulo de tamaño random y color random(y que el anterior circulo no desaparezca). El punto es que cada vez que de click en cualquier parte de la pantalla aparezca un circulo de color random y tamaño random, sin que desaparezcan los demás circulos.
Aquí les pongo el código de lo que tengo hecho:
Código PHP:
<svg width="800" height="600" onload="Init( evt )" >
<script type="text/ecmascript">
var svgRoot;
var mouseP, newP, circP;
var bmousedown = 0 ;
var circpoint,circpointlabel;
function Init(evt){
svgRoot = document.documentElement;
mouseP = svgRoot.createSVGPoint() ;
newP = svgRoot.createSVGPoint();
circP = svgRoot.createSVGPoint();
circpoint = document.getElementById("circpoint");
circpointlabel = document.getElementById("circpointlabel");
}
function getUserCoordinates(p1){
var p1;
var p2 = svgRoot.createSVGPoint();
/*p2.x = p1.x - 400;
p2.y = 300 -p1.y;*/
return p2;
}
function getMouse(evt){
var pos = svgRoot.createSVGPoint();
pos.x = evt.clientX;
pos.y = evt.clientY;
return pos;
}
function onMouseMove(evt){
if(bmousedown) {
mouseP=getMouse(evt);
newP=getUserCoordinates(mouseP);
doUpdate();
}
}
function onMouseDown(evt) {
bmousedown = 1 ;
mouseP = getMouse(evt) ;
newP = getUserCoordinates(mouseP) ;
doUpdate() ;
}
function onMouseUp(evt) {
bmousedown = 0 ;
}
function doUpdate(){
circP.x = mouseP.x;
circP.y = mouseP.y;
circpoint.setAttributeNS(null, "cx", circP.x );
circpoint.setAttributeNS(null, "cy", circP.y );
circpointlabel.setAttributeNS(null, "x", circP.x-10 );
circpointlabel.setAttributeNS(null, "y", circP.y+25 );
}
</script>
<g transform = "translate(0, 0)" >
<circle id="circpoint" class="point" cx="13" cy="20" r="15" style="fill:red;" />
</g>
<rect id="canvas" x="0" y="0" width="800" height="600" opacity="0"
pointer-events="visible"
onmousemove="onMouseMove(evt)"
onmousedown="onMouseDown(evt)"
onmouseup="onMouseUp(evt)"
/>
</svg>
Si alguien va a probar este código que tengo hecho, tiene que probarlo con las extensiones .svg
Cualquier ayuda o sugerencia es bienvenida. Ya sea que alguien tenga el código de lo que estoy explicando arriba. Como también que debo añadir o quitar para que funcione este código según lo que expliqué arriba. Gracias anticipadas
.