HTML canvas 图片地图填充区域外

Question

我有一个图像贴图和一个 canvas，我现在有它所以多边形区域填充颜色，但我想要它所以多边形之外的所有东西都填充，这样看起来它亮了。

图像上会有多个区域，不过我现在只添加了一个。

另一件事是，在 mouseout 上，当前填充消失（这是正确的）但它立即消失，我想要淡入淡出，以便它在 mouseover 和 mouseout 上淡入淡出。

这是我的 html canvas/img 地图：

<canvas id="imgCanvas"></canvas> 
<center>
    <img src="/images/homepage.jpg" id="map-image" style="width: 100%; max-width: 100%; height: auto;" alt="" usemap="#homepage-image" /> 
    <map name="homepage-image"> 
        <area class="homepage-hover" onmouseover="myHover(this);" onmouseout="myLeave();" href="/about" shape="poly" coords="465, 766, 477, 710, 473, 605, 480, 490, 492, 455, 526, 432, 551, 430, 567, 379, 562, 334, 528, 237, 526, 208, 534, 178, 557, 142, 576, 122, 616, 108, 669, 94, 708, 106, 755, 124, 784, 146, 810, 200, 819, 247, 828, 300, 830, 352, 837, 409, 834, 443, 836, 457, 852, 467, 878, 486, 894, 520, 898, 564, 891, 612, 891, 663, 893, 706, 891, 766" /> 
    </map> 
</center>

这是将区域绘制到 canvas 上的 js:

window.onload = myInit();
var hdc;
function byId(e){return document.getElementById(e);}

function drawPoly(coOrdStr)
{
    var mCoords = coOrdStr.split(',');
    var i, n;
    n = mCoords.length;

    hdc.beginPath();
    hdc.moveTo(mCoords[0], mCoords[1]);

    for (i=2; i<n; i+=2)
    {
        hdc.lineTo(mCoords[i], mCoords[i+1]);
    }
    hdc.lineTo(mCoords[0], mCoords[1]);

    hdc.fill();
}

function myHover(element)
{
    var hoveredElement = element;
    var coordStr = element.getAttribute('coords');
    var areaType = element.getAttribute('shape');

    switch (areaType)
    {
        case 'polygon':
        case 'poly':
            drawPoly(coordStr);
            break;

        case 'rect':
            drawRect(coordStr);
    }
}

function myLeave()
{
     var canvas = byId('imgCanvas');
     hdc.clearRect(0, 0, canvas.width, canvas.height);
}

function myInit()
{
    var img = byId('map-image');

    var x,y, w,h;

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

    var imgParent = img.parentNode;
    var can = byId('imgCanvas');
    imgParent.appendChild(can);

    can.style.zIndex = 1;

    can.style.left = x+'px';
    can.style.top = y+'px';

    can.setAttribute('width', w+'px');
    can.setAttribute('height', h+'px');

    hdc = can.getContext('2d');

    hdc.fillStyle = 'rgba(0, 0, 0, 0.75)';
    hdc.strokeStyle = 'rgba(0, 0, 0, 0.75)';
}

Answer 1

所以在尝试了很多不同的方法后，结果发现使用 canvas' 并不是正确的方法。基本上我通过切换图像来解决这个问题。我最初尝试过这个但是使用 jquerys fadeIn/fadeOut 然后更改 img src 导致跳转并且没有最平滑的 dafe 效果。

我现在有图像，我在 photoshop 中将不透明度添加到我想要的区域，然后将它们全部设置为不透明度 0，除了初始 img，然后当我将鼠标悬停在映射区域上时，我使用 fadeIn 来更改不透明度到 1。这使过渡变得漂亮和平滑，并提供了预期的效果 - 还因为映射区域对于每个 img 都是相同的，我只需要一张地图。

如果有办法通过 canvas' 做到这一点，尽管我很感兴趣，特别是如何反转悬停的区域，使该区域内部保持不变，并且周围逐渐变色（不透明）。我查看了无数地图示例，none 其中的示例符合我的要求。

HTML canvas 图片地图填充区域外

HTML canvas image map fill outside the area

html

javascript

canvas

imagemap

html5-canvas