Question

我有一个图像地图和一个画布，我现在有它，所以聚合区域填充了颜色，但我想要它所以聚合物填充之外的所有东西，所以看起来它点亮了。

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

另一件事是，鼠标输出当前填充消失（这是正确的），但它立即这样做，我想要淡入淡出，以便它在鼠标悬停和鼠标移除时淡入淡出。

这是我的html canvas / img map：

<?php 
    if(!$blank) //blank templates dont display header nor footer
    { 
         //fetch the template file that holds the main menu, located in includes/helper-menu-main.php
         get_template_part( 'includes/helper', 'main-menu' );

    } ?>

    <div id='main' class='all_colors' data-scroll-offset='<?php echo avia_header_setting('header_scroll_offset'); ?>'>

    <?php 

        if(isset($avia_config['temp_logo_container'])) echo $avia_config['temp_logo_container'];
        do_action('ava_after_main_container'); 

    ?>

这是将区域绘制到画布上的js：

<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>

Answer 1

因此，在尝试了大量不同的方法后，结果发现使用帆布＆＃39;不是这样的。基本上我通过切换图像来解决这个问题。我原本试过这个，但是使用jquerys fadeIn / fadeOut，然后更改img src导致跳转并且没有最流畅的效果。

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

如果有办法通过画布来做到这一点＆＃39;虽然我感兴趣，特别是我如何能够反转悬停的区域，因此在该区域内保持不变，并且在它周围渐渐变色（具有不透明度）。我看过无数的地图示例，其中没有一个能满足我的要求。

HTML画布图像映射填充区域外

1 个答案: