网格具有可点击的不规则形状

Question

我在这里开发此功能有点麻烦，因为它必须适用于IE9 +所以css clip-path不是一个选项（http://caniuse.com/#feat=css-clip-path）。

问题：

• 我需要创建一个由6个元素组成的网格。
• 每个元素都是图像。
• 在进入网格页面之前，图像可能会根据用户的答案而有所不同。
• Eeach元素/图像必须是可复制的，并且将获得一个“选定”类，它将div与文本和背景图像重叠。

图片：

实现这一目标的最佳方法是什么？

Answer 1

执行此操作的一种方法是将所需的六个图像的每个组合保存到一个大图像中。然后，根据用户的答案组合，将相应的图像作为div的背景图像插入。然后，您可以在与分割边缘大致相关的同一div中叠加可点击热点。

然而，这可能不是最实用的解决方案，在很大程度上取决于您处理的答案/图像数量。

或者，您可以绘制SVG形状并将其填充设置为所需的图像。

我可以推荐Raphael.js作为起点。您应该能够在文档中找到所需内容

另一种选择是使用HTML5画布： http://jsfiddle.net/julienbidoret/GKP7X/1/

（jsfiddle信用julienbidoret）

<强>使用Javascript：

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');

img.onload = function () {

    ctx.save();
    ctx.beginPath();
    ctx.moveTo(20, 0);
    ctx.lineTo(240, 0);
    ctx.lineTo(220, 240);
    ctx.lineTo(0, 240);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img, 0, 0);
    ctx.restore();
}

img.src = "http://upload.wikimedia.org/wikipedia/commons/2/2b/Clouds.JPG";

<强> HTML：

<canvas id="c" width="300" height="300" ></canvas>

IE9支持SVG和canvas。