javascript - 仅在一张 Canvas 中加载图像

Question

已更新

我有一个 HTML 代码如下:

<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>

我有一个函数如下:

var Context;

function onSign(canvas){
    var ctx = document.getElementById(canvas).getContext('2d');     
    SigWebSetDisplayTarget(ctx);
    tmr = setInterval(SigWebRefresh, 50);
}   

function SigWebSetDisplayTarget( obj ){ 
    Context = obj;      
}

我使用不同的 canvas id 参数调用了函数 OnSign 两次。

OnSign('canvas1');
OnSign('canvas2');

下面是由于某种原因被重复调用的 SigWebRefresh 函数。

function SigWebRefresh(){
    xhr2 = new XMLHttpRequest();
    requests.push(xhr2);  

    xhr2.open("GET", baseUri + "SigImage/0", true );
    xhr2.responseType = "blob"

    xhr2.onload = function (){
        var img = new Image();      
        img.src = 'image.jpg';  

        img.onload = function (){                   
            Ctx.drawImage(img, 0, 0);
            revokeBlobURL( img.src );
            img = null;
        }
    }   
    xhr2.send(null);
}

之后，我注意到两个 Canvas 正在更新，并且图像已加载到2 Canvas 。为什么？我必须加载图像，仅加载到我通过函数 OnSign 提供的最后一个 Canvas 。我哪里失踪了？

Answer 1

var Context; 在全局范围内声明

OnSign('canvas1');
OnSign('canvas2');

这样做，您将分配第二个 Canvas 的值。

更新:http://jsfiddle.net/bmynvtLd/2/

这就是您想要更新两个上下文的内容吗？如果是，这就是将参数传递给 setInterval 函数的方式: setInterval(function() {SigWebRefresh(ctx)}, 300);

运行示例:

    var images = ['http://img09.deviantart.net/6d02/i/2015/284/0/b/beginning_autumn_by_weissglut-d9cssxw.jpg', 'http://orig06.deviantart.net/063c/f/2013/105/3/6/free_crystal_icons_by_aha_soft_icons-d61tfi1.png', 'http://img15.deviantart.net/b126/i/2015/118/c/1/this_small_tree_by_weissglut-d8re8q7.jpg',             'http://img00.deviantart.net/84f8/i/2015/284/d/f/nuclear_light_by_noro8-d9cs4u6.jpg'];

function OnSign(canvas){
    var ctx = document.getElementById(canvas).getContext('2d');     

    tmr = setInterval(function() {SigWebRefresh(ctx)}, 300);
}   


OnSign('canvas1');
OnSign('canvas2');

var index = 0;
function MyIndex()
{
   // console.log(index);
    index = images.length == index ? 0 : index+1;
    return images[index];

}

function SigWebRefresh(Context){
    var img = new Image();      
    img.src = MyIndex();              
    img.onload = function (){           
        Context.drawImage(img, 0, 0);           
        img = null;
    }
}