Javascript 在html画布上使用图像作为按钮

由于markE，我已经设法让javascript代码在html画布上显示的图像上跟踪光标，但现在我尝试将每个图像视为一个按钮，并在光标悬停时显示不同的图像。到目前为止，通过许多排列，我还无法将图像或图像路径名存储到数组元素中，该数组元素也包含我们用来包含路径的点。代码如下：

<script type="text/javascript" language="JavaScript">

    var canvas;
    var canvasWidth;
    var ctx;

    function init() {
        HideContent('readLess');

        var cursors=['default','w-resize','n-resize'];
        var currentCursor=0;

        canvas = document.getElementById('puzzle-container');
        canvas.width = 815;
        canvas.height = 425;
        canvas.align = 'center';
        ctx = canvas.getContext("2d");

        var search = new Image();
        search.src = 'img/puzzleSearch.png';
        var searchHover = new Image();
        search.onload = function() {
            ctx.drawImage(search, 0, 0);
        };
        var nav = new Image();
        nav.src = 'img/puzzleNav.png';
        var navHover = new Image();
        nav.onload = function() {
            ctx.drawImage(nav, 119, 2.5 );
        }
.
.
.           
        var events = new Image();
        events.src = 'img/puzzleEvents.png';
        var eventsHover = new Image();
        eventsHover.src = 'img/puzzleEventsHover.png';
        events.onload = function() {
            ctx.drawImage(events, 564, 265 );
        }

        function reOffset(){
            var BB=canvas.getBoundingClientRect();
            offsetX=BB.left;
            offsetY=BB.top;        
        }
        var offsetX,offsetY;
        reOffset();
        window.onscroll=function(e){ reOffset(); }
        window.onresize=function(e){ reOffset(); }


        $("#puzzle-container").mousemove(function(e){handleMouseMove(e);});

        var shapes=[];
        shapes.push({
                points:[{x:0,y:2.5},{x:155,y:2.5},{x:155,y:205},{x:0,y:205}], cursor:1, img:search, imgHov:searchHover,
        });

.
.
.   
        shapes.push({
                points:[{x:0,y:310},{x:250,y:310},{x:250,y:400},{x:0,y:400}], cursor:1, img:events, imgHov:'img/eventsHover.png',
        });

        for(var i=0;i<shapes.length;i++){
            var s=shapes[i];
            definePath(s.points);
            ctx.stroke();
        }

        function definePath(p){
            ctx.beginPath();
            ctx.moveTo(p[0].x,p[0].y);
            for(var i=1;i<p.length;i++){
                ctx.lineTo(p[i].x,p[i].y);
            }
            ctx.closePath();
        }

        function handleMouseMove(e){
            // tell the browser we're handling this event
            e.preventDefault();
            e.stopPropagation();

            mouseX=parseInt(e.clientX-offsetX);
            mouseY=parseInt(e.clientY-offsetY);

            // Put your mousemove stuff here
            var newCursor;
            for(var i=0;i<shapes.length;i++){
                var s=shapes[i];
                definePath(s.points);
                if(ctx.isPointInPath(mouseX,mouseY)){
                    if (i === 6 ) {
                        var img = new Image();
                        var imgSrc = s.imgHov;
                        img.src = imgSrc;
                        console.log("hover image is: " + s.imgHov );
                        ctx.drawImage(img, 564, 265 );
                    }
                    newCursor=s.cursor;
                    break;
                }
            }
            if(!newCursor){
                if(currentCursor>0){
                    currentCursor=0;
                    canvas.style.cursor=cursors[currentCursor];              
                }
            }else if(!newCursor==currentCursor){
                currentCursor=newCursor;
                canvas.style.cursor=cursors[currentCursor];              
            }
        }



    }

    function HideContent(d) {
        document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
        document.getElementById(d).style.display = "block";
    }
    function ReverseDisplay(d) {
        if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
        else { document.getElementById(d).style.display = "none"; }
    }

</script>

var帆布；
var画布宽度；
var-ctx；
函数init（）{
HideContent（“无读”）；
变量游标=['default'，'w-resize'，'n-resize']；
var currentCursor=0；
canvas=document.getElementById（'puzzle-container'）；
画布宽度=815；
canvas.height=425；
canvas.align='center'；
ctx=canvas.getContext（“2d”）；
var search=新图像（）；
search.src='img/puzzsearch.png'；
var searchHover=新图像（）；
search.onload=函数（）{
ctx.drawImage（搜索，0,0）；
};
var nav=新图像（）；
nav.src='img/puzznav.png'；
var navHover=新图像（）；
nav.onload=函数（）{
ctx.drawImage（导航，119，2.5）；
}
.
.
.           
var events=newimage（）；
events.src='img/puzzleEvents.png'；
var eventsphover=新图像（）；
eventsphover.src='img/puzzleventshover.png'；
events.onload=函数（）{
ctx.drawImage（事件564265）；
}
函数reOffset（）{
var BB=canvas.getBoundingClientRect（）；
offsetX=BB.left；
offsetY=BB.top；
}
var offsetX，offsetY；
reOffset（）；
onscroll=函数（e）{reOffset（）；}
onresize=函数（e）{reOffset（）；}
$（“#拼图容器”）.mousemove（函数（e）{handleMouseMove（e）；}）；
变量形状=[]；
推({
点：[{x:0，y:2.5}，{x:155，y:2.5}，{x:155，y:205}，{x:0，y:205}]，光标：1，img:search，imgHov:searchHover，
});
.
.
.   
推({
点：[{x:0，y:310}，{x:250，y:310}，{x:250，y:400}，{x:0，y:400}]，光标：1，img:events，imgHov:'img/eventsphover.png'，
});
对于（var i=0；i，您的解决方案是在使用图像之前预加载所有图像

图像不会立即加载。设置
img.src
时，浏览器开始加载图像，但即使在图像完全加载之前也会继续加载下一行代码

问题在于：

// the browser BEGINS to load the image, but simultaneously
// continues executing the code that follows.
img.src = imgSrc;

// img has not yet loaded when drawImage is executed 
ctx.drawImage(img, 564, 265 );

有几十个图像预加载程序可用。这里只有一个：

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// put the paths to your images in imageURLs[]
var imageURLs=[];  
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face1.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/face2.png");

// the loaded images will be placed in imgs[]
var imgs=[];
var imagesOK=0;
startLoadingAllImages(imagesAreNowLoaded);

// Create a new Image() for each item in imageURLs[]
// When all images are loaded, run the callback (==imagesAreNowLoaded)
function startLoadingAllImages(callback){

  // iterate through the imageURLs array and create new images for each
  for (var i=0; i<imageURLs.length; i++) {
    // create a new image an push it into the imgs[] array
    var img = new Image();
    // Important! By pushing (saving) this img into imgs[],
    //     we make sure the img variable is free to
    //     take on the next value in the loop.
    imgs.push(img);
    // when this image loads, call this img.onload
    img.onload = function(){ 
      // this img loaded, increment the image counter
      imagesOK++; 
      // if we've loaded all images, call the callback
      if (imagesOK>=imageURLs.length ) {
        callback();
      }
    };
    // notify if there's an error
    img.onerror=function(){alert("image load failed");} 
    // set img properties
    img.src = imageURLs[i];
  }      
}

// All the images are now loaded
// Do drawImage & fillText
function imagesAreNowLoaded(){

  // the imgs[] array now holds fully loaded images
  // the imgs[] are in the same order as imageURLs[]

}

//画布相关变量
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
//将图像的路径放在imageURLs[]
var-imageurl=[]；
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/multple/face1.png");
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/multple/face2.png");
//加载的图像将放置在imgs[]
var-imgs=[]；
var-imagesOK=0；
惊人加载所有图像（图像未加载）；
//为imageURLs[]中的每个项目创建新图像（）
//加载所有图像后，运行回调（=imagesAreNowLoaded）
函数startingAllimages（回调）{
//迭代imageURLs数组并为每个数组创建新图像
对于（var i=0；iit是因为在第一个形状中，
s.imgHov
是实际的
，或者在其他形状中也实际引用一个标记，然后调用
ctx.drawImage（s.imgHov，564265）；
以避免在没有缓存的情况下重新加载图像。