加载图像

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

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

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); 
} 

在那之后，我注意到，这两个帆布正在更新和图像加载到2 canvas。为什么？我必须加载图像，只有我与功能OnSign提供最后的画布。我错过了什么？

Answer 1

var Context;在全球范围内

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

宣称这样做的帆布二号所以你指定的值。

更新：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; 
    } 
}