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

仅在一个画布中加载图像

1 个答案: