javascript - jQuery 和 Canvas 加载行为

Question

潜伏了很长时间，这是我在这里发表的第一篇文章!我一直在 RTFMing 并到处寻找这个问题的答案，但无济于事。我会尽力提供尽可能多的信息，希望您能帮助我。

此代码适用于我的 personal webpage 。我正在尝试使用 HTML5 和 jQuery 实现某种现代的点击 map 。在网站中您会看到main image以及与 this picture 具有相同坐标且具有相同大小的隐藏 Canvas 被吸引进去。

当鼠标悬停在主图片上时，它会从绘制到 Canvas 上的图像中读取鼠标像素数据(r、g、b、alpha 数组)。当它看到像素颜色为黑色时(在我的例子中，我只检查红色值，在黑色像素中该值将为 0)，它知道激活相关按钮。

(最初，我是从 this article 得到这个想法的)

我选择这种方法的原因是为了使页面能够响应并动态更改以适应不同的显示器和移动设备。为了实现这一点，我每次调整屏幕大小时都会调用 DrawCanvas 函数，以使用新尺寸重新绘制 Canvas 。

一般来说，这可以正常工作。问题是，Chrome 和 IE(9) 中的行为似乎不一致。当我最初打开页面时，有时我没有得到任何像素数据(0,0,0,0)，直到我重新调整浏览器大小。起初我认为有一些加载问题导致了这种情况发生，所以我尝试用 setTimeout 破解它，但它仍然不起作用。我还尝试触发调整大小事件并在 document.ready 处调用drawCanvas函数，仍然不起作用。

最让我烦恼的是不一致。有时有效，有时无效。一般来说，在chrome中比在IE(9)中更稳定。

以下是已弃用的代码:

<script type="text/javascript">

    $(document).ready(function(){setTimeout(function() {

        // Get main image object    
        var mapWrapper = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);

        // Create a hidden canvas the same size as the main image and append it to main div
        var canvas = document.createElement('canvas');
        canvas.height = mapWrapper.clientHeight;
        canvas.width = mapWrapper.clientWidth;
        canvas.fillStyle = 'rgb(255,255,255)';
        canvas.style.display = 'none';
        canvas.id = 'hiddencvs';
        $('#map_wrapper').append(canvas);

        // Draw the buttons image into the canvas
        drawCanvas(null);

        $("#map_wrapper").mousemove(function(e){

            var canvas = document.getElementById('hiddencvs');
            var context = canvas.getContext('2d');

            var pos = findPos(this);
            var x = e.pageX - pos.x;
            var y = e.pageY - pos.y;

            // Get pixel information array (red, green, blue, alpha)
            var pixel = context.getImageData(x,y,1,1).data; 

            var red = pixel[0];
            var main_img = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);

            if (red == 0)
            {
                ...
            }

            else {
                ...
            }   
        });     

    },3000);}); // End DOM Ready

    function drawCanvas(e)
    {
        // Get context of hidden convas and set size according to main image            
        var cvs = document.getElementById('hiddencvs');
        var ctx = cvs.getContext('2d');
        var mapWrapper = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);
        cvs.width = mapWrapper.clientWidth;
        cvs.height = mapWrapper.clientHeight;


        // Create img element for buttons image
        var img = document.createElement("img");
        img.src = "img/main-page-buttons.png";

        // Draw buttons image inside hidden canvas, strech it to canvas size    
        ctx.drawImage(img, 0, 0,cvs.width,cvs.height);
    }

    $(window).resize(function(e){
            drawCanvas(e);  
        }
    );

    function findPos(obj)
    {
        ...
    }

</script>

如果有任何帮助，我将不胜感激!谢谢!

罗恩。

Answer 1

您不需要等待图像加载，因此根据缓存，您可以在 Canvas 中绘制或不绘制图像。

你应该这样做:

$(function(){
    var img = document.createElement("img");
    img.onload = function() {
        var mapWrapper = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);
        ...
        // your whole code here !
        ...
    }
    img.src = "img/main-page-buttons.png";
});