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

Question

<分区>

Answer 1

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

虚线图效果:

• 用黑色填充 Canvas
• 将合成设置为 destination-out，这将导致新绘图“删除”现有(黑色)内容。
• 在行和列中画点。每个点都会去掉其下方的黑色，使该点透明。
• 将合成设置为 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>