带有 javascript 和 css 的可点击点状图案叠加在图像上

Question

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

原文：

结果：

Answer 1

您可以使用合成来创建点状图像。

虚线图效果：

用黑色填充canvas
将合成设置为 destination-out，这将使新绘图成为 "erase" 现有（黑色）内容。
在行和列中画点。每个点都会去掉其下方的黑色，使点透明。
将合成设置为 destination-atop，这将使新绘图仅绘制在 canvas 的透明部分上。
绘制图像。图像只会以点的形式出现。

响应对特定点的点击

监听 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>

带有 javascript 和 css 的可点击点状图案叠加在图像上

A clickable dotted pattern overlay on image with javascript and css

javascript

css

processing

html5-canvas