javascript - 可点击的虚线图案覆盖在带有javascript和CSS的图片上

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        4年前关闭。
                                                                                            
                
        
我想用javascript和css在图像上实现可点击的虚线图案覆盖，但是不知道从哪里开始。每个点都有一个可点击的网址，该网址是唯一的并以编程方式分配。如果有人能指出我正确的方向，将不胜感激:)谢谢。

原版的：



结果：

最佳答案

您可以使用合成来创建虚线图像。

点状图像效果：




用黑色填充画布
将合成设置为destination-out，这将导致新图形“擦除”现有（黑色）内容。
在行和列中绘制点。每个点都会剔除其下方的黑色，从而使该点透明。
将compositing设置为destination-atop，这样可以将新图形仅绘制在画布的透明部分上。
绘制图像。图像只会出现在圆点中。


响应对特定点的点击


监听mousedown事件。
计算用户单击的点。
将用户带到与该标识的点相对应的URL。


这是示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }


var PI2=Math.PI*2;
var radius=5;
var spacer=1;
var diameter=radius*2;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/dotimage.jpg";
function start(){
  cw=canvas.width=img.width;
  ch=canvas.height=img.height;
  //
  ctx.fillStyle='black';
  ctx.fillRect(0,0,cw,ch);
  //
  ctx.globalCompositeOperation='destination-out';
  ctx.beginPath();
  for(var y=radius;y<ch;y+=diameter+spacer){
    for(var x=radius;x<cw;x+=diameter+spacer){
      ctx.arc(x,y,radius,0,PI2);
      ctx.closePath();
    }}
  ctx.fill();
  //
  ctx.globalCompositeOperation='destination-atop';
  ctx.drawImage(img,0,0);
  //
  ctx.globalCompositing='source-over';
}



function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  //
  var x=parseInt(mouseX/(diameter+spacer));
  var y=parseInt(mouseY/(diameter+spacer));
  $('#position').text('You clicked dot at x='+x+' / y='+y);

}


$("#canvas").mousedown(function(e){handleMouseDown(e);});

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4 id=position>Click on a dot.</h4>
<canvas id="canvas" width=300 height=300></canvas>