Question

我想从第一个画布生成一个图像然后在另一个画布上绘制，但我有一个问题因为我不知道为什么我在其他画布中看不到任何内容。这是我的代码：

<canvas id="gameCanvas" width="704" height="608" />
<script type='text/javascript'>
    // prepaire our game canvas
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");
        var ctx = document.createElement("canvas").getContext("2d");
        ctx.canvas.width = 2048;
        ctx.canvas.height = 2048;   

        var rows = 64;
        var columns = 64;
        this.image = new Image();
        var imageObject = document.createElement("img");
        var me = this;

        /// need this as loading is async
        imageObject.onload = function() {    
            for (var i = 0; i < rows; i++) {        
                for (var j=0; j <columns; j++) {  
                    ctx.drawImage(this, i*32,j*32,32,32); 
                }   
            }       
            // store the generate map as this image texture
            me.image.src = ctx.canvas.toDataURL("image/jpg");                 
        }

        imageObject.src='ground.jpg';
        this.image.src = ctx.canvas.toDataURL("image/jpg");     


        context.drawImage(this.image, 0, 0, 300, 300, 0, 0, 300,300);       
</script>

请告知为什么它不起作用？

Answer 1

创建DOM元素后，您应该将其附加到另一个元素上以显示它。

试试这个

jsfiddle

脚本：

var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");
        var image=document.createElement("img");
        image.onload=function(){ 
            canvas.width = image.width;
            canvas.height=image.height;
            ctx.drawImage(image,0,0); 
            var tcanvas = document.createElement('canvas');
            var tctx = tcanvas.getContext('2d');
            tcanvas.width = 8*image.width;
            tcanvas.height = 8*image.height;
            for(var i=0;i<8;i++){
                for(var j=0;j<8;j++){
                      tctx.drawImage(image, i*image.width,j*image.height); 
                    document.body.appendChild(tcanvas);
                }
            }
        }
   image.src="https://lh4.googleusercontent.com/-L1cr04d6ONc/RsRykgOl9zI/AAAAAAAABIE/WqBGOdiJnys/s128/Finishes.Flooring.Tile.Square.Blue.bump.jpg";

Answer 2

您正在通过将画布转换为DataURL然后将图像源设置为该DataURL来进行不必要的绕行。这是不必要的，因为context.drawImage可以与<canvas>一起使用，就像它可以与<img>一起使用一样。您可以使用背景画布（画布本身，而不是上下文）作为源，就像您可以使用图像一样。
您似乎假设在设置src-attribute时执行图像的onload-handler。不是这种情况。从服务器加载图像时，您的javascript代码会继续。您无法确定何时（以及是否）实际执行负载处理程序。但是您要将this.image.src设置为画布的dataUrl，然后将该图像用于context.drawImage。此时，画布可能仍然是空的，因此data-url也将是空图像。

解决方案：将代码的最后一行放入onload-function。

HTML将图像从画布复制到另一个画布

2 个答案: