使用javascript和css在图像上叠加可点击的点缀图案

Question

我想用javascript和css在图像上实现可点击的点图案覆盖，但不知道从哪里开始。每个点都有一个可单击的URL，它是唯一的并以编程方式分配。如果有人能指出我正确的方向，将不胜感激:)谢谢。

原件：

结果：

Answer 1

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

虚线图像效果：

• 用黑色填充画布
• 将合成设置为UPDATE ScheduleTasks SET AssignedResource = (SELECT TOP 1 Resource_ID FROM Resource WHERE Resource_Name = '360 CLEAN') WHERE st.ScheduleID = (SELECT ScheduleID FROM Schedule WHERE Job_No = 'ABC123') AND st.Description = 'Filing' ，这将导致新图纸“擦除”＃34;现有（黑色）内容。
• 以行和列绘制点。每个圆点都会敲掉它下面的黑色，使点变得透明。
• 将合成设置为destination-out，这样只会在画布的透明部分上绘制新图纸。
• 绘制图像。图像仅以点形式出现。

响应特定点的点击次数

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

以下是示例代码和演示：

＆＃13;

＆＃13;

destination-atop

＆＃13;

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);});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;