HTMLキャンバス画像マップの範囲外に記入

Question

私はイメージマップとキャンバスを持っていますが、現時点ではポリ領域が色で塗りつぶされていますが、ポリそれが点灯しているように見える。

画像に複数の領域がありますが、今はもう1つ追加しました。

もう1つのことは、現在のfillは消えていますが（それは正しいですが）、すぐにそうなります。フェードインしてマウスオーバーとマウスアウトでフェードインするようにします。ここで

は私のHTMLキャンバス/ 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> 

は、キャンバスにエリアを描く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

だから、さまざまな方法のトンを試した後、それは使用して判明しますキャンバスは道ではなかった。基本的に私はイメージを切り替えることでこれを回避しました。私はこれを最初に試していましたが、jquerys fadeIn/fadeOutを使用し、img srcを変更するとジャンプが発生し、スマートなダーフ効果はありませんでした。

私は今、私が望む領域に不透明度を追加した画像を持っていますが、最初の画像を除いてすべて不透明度0に設定しておきます。 1.これにより、トランジションが素早く滑らかになり、望ましい効果が得られます。また、各マップでマッピング領域が同じであるため、単一のマップのみが必要です。

キャンバスで行う方法があれば、私は興味がありますが、特にどのように領域を反転させることができ、その領域内は同じままで、周囲が色あい（不透明）します。無数のマップの例を見てきましたが、私が求めているものはありません。