image map and canvas

问题

I have used an image map (shape circles). I wanted to draw on image map area (like visible circles or icon to identify them).

Is there any solution?

So far I have used a canvas as an overlay over image and draw on it.

It worked

but the problem is image is in div(container) and I have applied overflow hidden property on it so that when it is zoomed in or out it stays in container and other portion hidden.

But with canvas I am not able to achieve it. When I applied canvas with position:absolute overflow hidden property did not work. and when I applied canvas with position:relative overflow hidden worked but image below it was gone(not shown).

function drawCir(coOrdStr) {
    var mCoords = coOrdStr.split(',');
    var x, y, r;
    x = mCoords[0];
    y = mCoords[1];
    r = mCoords[2];
    hdc.beginPath();
    hdc.arc(x, y, r, 0, 2 * Math.PI);
    hdc.fill();
    hdc.stroke();
}


function myInit() {
    // get the target image
    var img = byId('mape');

    var x, y, w, h;

    // get it's position and width+height
    x = img.offsetLeft;
    y = img.offsetTop;
    w = img.clientWidth;
    h = img.clientHeight;

    // move the canvas, so it's contained by the same parent as the image
    var imgParent = img.parentNode;
    var can = byId('myCanvas');
    // imgParent.appendChild(can);

    // place the canvas in front of the image
    can.style.zIndex = 1;

    // position it over the image
    can.style.left = x + 'px';
    can.style.top = y + 'px';

    // make same size as the image
    can.setAttribute('width', w + 'px');
    can.setAttribute('height', h + 'px');

    // get it's context
    hdc = can.getContext('2d');

    // set the 'default' values for the colour/width of fill/stroke operations
    hdc.fillStyle = 'red';
    hdc.strokeStyle = 'red';
    hdc.lineWidth = 2;

    $("area").each(function() {

        var coordStr = $(this).attr('coords');
        drawCir(coordStr);
    });


}

#myCanvas
{
    pointer-events: none;       /* make the canvas transparent to the mouse - needed since canvas is position infront of image */
    position:absolute;

}

#con{
overflow: hidden;
height: 600px;
width: 100%;
}
#img{
width:100%;
height:100%;
position:relative;

}

<div id="con">
                    <canvas id="myCanvas"></canvas>
                    <img src="images/img.png" alt="" id="img" usemap="#img_map">
                    <map name="img_map"><area shape=circle>......</map>
       </div>
               //fucntion to draw  called in body tag

回答1:

add a z-index to your convas:

function drawCir(coOrdStr) {
    var mCoords = coOrdStr.split(',');
    var x, y, r;
    x = mCoords[0];
    y = mCoords[1];
    r = mCoords[2];
    hdc.beginPath();
    hdc.arc(x, y, r, 0, 2 * Math.PI);
    hdc.fill();
    hdc.stroke();
}


function myInit() {
    // get the target image
    var img = byId('mape');

    var x, y, w, h;

    // get it's position and width+height
    x = img.offsetLeft;
    y = img.offsetTop;
    w = img.clientWidth;
    h = img.clientHeight;

    // move the canvas, so it's contained by the same parent as the image
    var imgParent = img.parentNode;
    var can = byId('myCanvas');
    // imgParent.appendChild(can);

    // place the canvas in front of the image
    can.style.zIndex = 1;

    // position it over the image
    can.style.left = x + 'px';
    can.style.top = y + 'px';

    // make same size as the image
    can.setAttribute('width', w + 'px');
    can.setAttribute('height', h + 'px');

    // get it's context
    hdc = can.getContext('2d');

    // set the 'default' values for the colour/width of fill/stroke operations
    hdc.fillStyle = 'red';
    hdc.strokeStyle = 'red';
    hdc.lineWidth = 2;

    $("area").each(function() {

        var coordStr = $(this).attr('coords');
        drawCir(coordStr);
    });


}

#myCanvas
{
    pointer-events: none;       /* make the canvas transparent to the mouse - needed since canvas is position infront of image */
    position:absolute;
    z-index: 2;
}

#con{
overflow: hidden;
height: 600px;
width: 100%;
}
#img{
width:100%;
height:100%;
position:relative;

}

<div id="con">
                    <canvas id="myCanvas"></canvas>
                    <img src="images/img.png" alt="" id="img" usemap="#img_map">
                    <map name="img_map"><area shape=circle>......</map>
       </div>
               //fucntion to draw  called in body tag

来源：https://stackoverflow.com/questions/27587532/image-map-and-canvas