添加點到圖像 - 初學者

Question

我有一個像http://weburl/mine/dot.html?gid=4&x=266y=647&x=191y=355&x=100y=893

從上面的網址的URL。我需要通過採取x和y值在屏幕上繪製點。

根據上面的例子，有3個這樣的值。

x=266y=647 
x=191y=355 
x=100y=893 

有2份在這樣一個問題：

1）如何可以從URL打破值並把它放到一個陣列以構造圖像。 （由於在上述URL中有x的多個值）

2.）如何在圖像上繪製點。 fiddle added.

注意：以下是點的CSS。

   position: 'absolute', 
       top: ev.pageY + 'px', 
       left: ev.pageX + 'px', 
       width: '10px', 
       height: '10px', 
       background: '#000000' 

Answer 1

1）

// for str use window.location.search.replace("?", ""); 
var str = 'gid=4&x=266y=647&x=191y=355&x=100y=893'; 
var data = str.match(/(x|y)=(\d+)/g), pointsX = [], pointsY = []; 
for(var i = 0; i < data.length; i++) 
{ 
    var tmp = data[i].split('='); 
    if (tmp[0] == 'x') 
     pointsX.push(tmp[1]); 
    else 
     pointsY.push(tmp[1]); 
} 

2）放置與上述圖像或使用HTML5 +帆布http://jsfiddle.net/dh0swt43/

var str = 'gid=4&x=20y=30&x=40y=50&x=100y=100'; 
 
var data = str.match(/(x|y)=(\d+)/g), pointsX = [], pointsY = []; 
 
for(var i = 0; i < data.length; i++) 
 
{ 
 
    var tmp = data[i].split('='); 
 
    if (tmp[0] == 'x') 
 
     pointsX.push(tmp[1]); 
 
    else 
 
     pointsY.push(tmp[1]); 
 
} 
 
for(var i = 0; i < pointsX.length; i++) 
 
{ 
 
    var div = document.createElement('div'); 
 
    div.className = 'dot'; 
 
    div.style.left = pointsX[i] + 'px'; 
 
    div.style.top = pointsY[i] + 'px'; 
 
    document.getElementById('wrapper').appendChild(div); 
 
}

.dot { 
 
    height: 2px; 
 
    width: 2px; 
 
    position: absolute; 
 
    border: 2px solid red; 
 
    z-index: 10; 
 
}

<div style='position:relative' id='wrapper'> 
 
    <img src='http://bestclipartblog.com/clipart-pics/earth-clip-art-3.jpg'> 
 
</div>