Javascript 画布html标记

我有一个JavaScript项目（使用jquery），在它里面我用代码画一个画布，然后在上面插入一组图像。它代表没有任何错误的良好状态

问题：

稍后，我尝试从画布中获取这些图像，以比较它们是否具有相同的src或相同的id，而不使用新图像替换它们

我的职能是：

---

有什么帮助吗？

一旦你在

画布上画了东西，它就是像素了。它不会保留用于创建这些像素的对象。如果你想要这类信息，那么你要么需要自己在
canvas
之外维护它，要么使用一些为你保留对象的东西。
正如
Ravi Jain
所说，你无法将图像绘制到canvas对象，正如
robertc
所说，你可以使用img元素

尝试以下指定img元素而非画布用法的函数：

函数onClick（id）{
getScreen（id、函数（数据）{
var-inter；
变量筛选；
var-width=parseInt（data.maxX）+parseInt（data.tileWidth）；
var height=parseInt（data.maxY）+parseInt（data.tileHeight）；
屏幕=窗口。打开（“”，id，'width='+width+'，height='+height，true）；
绘制（屏幕、数据）；
inter=setInterval（函数（）{screen（screen，inter，id）；}，5000）；
});
}
功能屏幕（屏幕、内部、id）{
getScreen（id、函数（数据）{
如果（screen.closed==true）{
间隔时间；
返回；
}
if（（screen.document.getElementById（“screen”）.style.width！=data.maxX+“px”）||
（screen.document.getElementById（“screen”）.style.height！=data.maxY+“px”））{
screen.close（）；
var-width=parseInt（data.maxX）+parseInt（data.tileWidth）；
var height=parseInt（data.maxY）+parseInt（data.tileHeight）；
屏幕=窗口。打开（“”，id，'width='+width+'，height='+height，true）；
}
绘制（屏幕、数据）；
});
}
功能图（屏幕、数据）{
var screenDiv=screen.document.getElementById（“screen”）；
if（screenDiv==null）screen.document.write（“”）；
var-tileY=0；
var-tileX=0；
var计数器=0；
对于（var i=0；据我所知，您无法将图像绘制到画布对象。您可以做的是创建一个包含图像id的数组，并将其与新下载图像的id进行比较。如果我有16个图像，并且我比较了您提到的id，我发现10个id是不同的，我如何在画布中仅通过它的引用替换这10个图像还有另一种用html而不是画布来表示图像的方法吗？当然有，
img
元素。谢谢danny这是真的，我也有这个问题，谢谢你
var inter;
var screen;

function onClick(id){
    getScreen(id, function(data){
        screen=window.open('',id,'width=' + data.maxX + ',height=' + data.maxY , true);
        if (screen.document.getElementById("screen") != null ){    
            screen.document.getElementById("screen").innerHTML = "";
        }
        screen.document.write('<div id="screen"><canvas id="screenCanvas" width=' +
                              data.maxX + ' height=' + data.maxY + 
                              ' style="border:2px solid #000000;color:#000000;" ></canvas></div>');
        draw(data);
        inter = setInterval(function(){screen(id); }, 5000);
    });
}

function screen(id){
    getScreen(id, function(data){
        if (screen.closed == true){
            clearInterval(inter);
            return;
        }
        if((screen.document.getElementById('screenCanvas').width != data.maxX) ||
            (data.maxY != screen.document.getElementById('screenCanvas').height)){
            screen.close();
            screen=window.open('',id,'width=' + data.maxX + ',height=' + data.maxY , true);        
        screen=window.open('',id,'width=' + data.maxX + ',height=' + data.maxY , true);
        if (screen.document.getElementById("screen") != null ){    
            screen.document.getElementById("screen").innerHTML = "";
        }
        screen.document.write('<div id="screen"><canvas id="screenCanvas" width=' +
                              data.maxX + ' height=' + data.maxY + 
                              ' style="border:2px solid #000000;color:#000000;" ></canvas></div>');
        draw(data);
    });
}

function draw(data) {  
    var canvas = screen.document.getElementById('screenCanvas');
    var context = canvas.getContext('2d');  
    var tileY = 0;
    var tileX = 0;
    var counter = 0;
    var tileWidth = data.tileWidth;
    var tileHeight = data.tileHeight;
    for (var i=0;i<(data.maxX/data.tileWidth);i++){  
        for (var j=0;j<(data.maxY/data.tileHeight);j++){  
            var img = new Image();  
            img.onload = (function(img, tileX, tileY, tileWidth, tileHeight){
                return function() {
                    context.drawImage(img,tileX, tileY, tileWidth, tileHeight);
                }
            })(img, tileX, tileY, tileWidth, tileHeight);  
            img.src = "http://myserver:8080/images/screen/tile/" + 
                       data.tiles[counter].imageId; 
            tileX = tileX + parseInt(data.tileWidth); 
            counter ++; 
         } 
        tileY = tileY + parseInt(data.tileHeight); 
        tileX = 0;
    }  
}

</script>

id[unique](is the id of the user), 
maxX(maximum width of the screen), 
maxY(maximum height of the screen), 
tileWidth(width of each image), 
tileHeight(height of each image),
tiles(list of images)
    x(left position of the image)
    y(top postion of the image) 
    imageId[unique](id of each image)
example: data[id:1,maxX:1920,maxY:1080,tileWidth:480,tileHeight:270,tiles:(x:2,y:1,imageId:1a)]

function onClick(id){
    getScreen(id, function(data){
        var inter;
        var screen;
        var width = parseInt(data.maxX) + parseInt(data.tileWidth);
        var height = parseInt(data.maxY) + parseInt(data.tileHeight);
        screen=window.open('',id,'width=' + width + ',height=' + height , true);
        draw(screen, data);
        inter = setInterval(function(){screen(screen, inter, id); }, 5000);
    });
}

function screen(screen, inter, id){
    getScreen(id, function(data){
        if (screen.closed == true){
            clearInterval(inter);
            return;
        }
        if((screen.document.getElementById("screen").style.width != data.maxX + "px") ||
           (screen.document.getElementById("screen").style.height != data.maxY + "px")){
            screen.close();
            var width = parseInt(data.maxX) + parseInt(data.tileWidth);
            var height = parseInt(data.maxY) + parseInt(data.tileHeight);
            screen=window.open('',id,'width=' + width + ',height=' + height , true);
        }
        draw(screen, data);
    });
}

function draw(screen, data) {
    var screenDiv = screen.document.getElementById("screen");
    if (screenDiv == null) screen.document.write('<div id="screen" style="width:' +
                data.maxX + '; height:' + data.maxY + '; " style="margin: 0 auto;" >');
    var tileY = 0; 
    var tileX = 0;
    var counter = 0;
    for (var i=0;i<(data.maxX/data.tileWidth);i++){ 
        for (var j=0;j<(data.maxY/data.tileHeight);j++){  
            var imageSource = screen.document.getElementById("id_" + counter);
            var path = "http://myserver:8080/images/screen/tile/" + 
                       data.tiles[counter].imageId; 
            if (imageSource == null){
                screen.document.write('<img id="id_' + counter + '" src="' + path +
                '" height="' + data.tileHeight + '" width="' + data.tileWidth + '" />');
            }else if(imageSource.src != path){
                imageSource.src = path;
            }
            tileX = tileX + parseInt(data.tileWidth); 
            counter ++; 
        }
        tileY = tileY + parseInt(data.tileHeight); 
        tileX = 0;
    }
    if (screenDiv == null) screen.document.write('</div>');
}

</script>