Question

我在for循环中自动填充25个canvas元素时遇到问题。它们的编号如下：can01到can25。

我已经尝试了所有我知道的在画布上绘制不同的图像，我花了很多时间搜索一些关于这个问题的文章，但我还没有找到。

这是我使用相同图像填充所有画布元素的工作代码：

var imageGrass = new Image();       

imageGrass.src = 'recources/imagesBG/grass.jpg';

imageGrass.onload = function() {
    for (var i = 1; i < 26; i++)
    {
        if( i < 10 )
        {
            var task = "can0" + i + "_ctx.drawImage(imageGrass, 0, 0);";
            eval(task);
        }
        else
        {
            var task = "can" + i + "_ctx.drawImage(imageGrass, 0, 0);";
            eval(task);
        }
    }
}

但我真的不知道如何使imageGrass.src动态。例如，canvas元素没有。 5（can05）在这种情况下应该看起来像石头纹理。

我真的很期待看到你的想法。我只是不明白。

Answer 1

以下是Dave如何利用数组来整理画布的好主意：

创建一个数组，该数组将保存对所有25幅画布的引用（对25个上下文执行相同操作）

var canvases=[];
var contexts=[];

接下来，用所有画布和上下文填充数组：

for(var i=0;i<25;i++){
    var canvas=document.getElementById("can"+(i<10?"0":""));
    var context=canvas.getContext("2d");
    canvases[i]=canvas;
    contexts[i]=context;
}

如果您之前没有看到过：i<10?"0":""是一个内联if / else，用于在编号较低的画布上添加前导零。

然后你可以像这样获取你的“can05”画布：

var canvas=canvases[4];

为什么4而不是5？数组基于零，因此canvases [0]保持can01。因此，数组元素4包含您的第5个画布“can05”。

所以你可以像这样获取“can05”的绘图上下文：

var context=contexts[4];

正如Dave所说，“逃避是邪恶的”所以这里是如何获取“can05”的上下文并在其上绘制石头图像。

var context=contexts[4];
context.drawImage(stoneImage,0,0);

这张石头图纸可以缩短为：

contexts[4].drawImage(stoneImage,0,0);

您甚至可以将这个缩短的代码放入一个函数中，以便于重用和修改：

function reImage( canvasIndex, newImage ){
    contexts[ canvasIndex ].drawImage( newImage,0,0 );
}

然后您可以通过调用函数来更改任何画布上的图像：

reimage( 4,stoneImage );

就是这样！

邪恶的逃避已经被征服（警告：再也不要邀请他们到你的电脑了！）

以下是示例代码和小提琴：http://jsfiddle.net/m1erickson/ZuU2e/

此代码动态创建25个画布，而不是硬编码25个html画布元素。

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:0px; margin:0px;border:0px; }
    canvas{vertical-align: top; }
</style>

<script>
$(function(){

    var canvases=[];
    var contexts=[];

    var grass=new Image();
    grass.onload=function(){

        // the grass is loaded
        // now make 25 canvases and fill them with grass
        // ALSO !!!
        // keep track of them in an array
        // so we can use them later!
        make25CanvasesFilledWithGrass()    

        // just a test
        // fill canvas#3 with gold
        draw(3,"gold");
        // fill canvas#14 with red
        draw(14,"red");

    }
    //grass.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/grass.jpg";
    //grass.src="grass.jpg";

    function make25CanvasesFilledWithGrass(){

        // get the div that we will fill with 25 canvases
        var container=document.getElementById("canvasContainer");

        for(var i=0;i<25;i++){
            // create a new html canvas element
            var canvas=document.createElement("canvas");
            // assign the new canvas an id, width and height
            canvas.id="can"+(i<10?"0":"")+i;
            canvas.width=grass.width;
            canvas.height=grass.height;
            // get the context for this new canvas
            var ctx=canvas.getContext("2d");
            // draw the grass image in the new canvas
            ctx.drawImage(grass,0,0);
            // add this new canvas to the web page
            container.appendChild(canvas);
            // add this new canvas to the canvases array
            canvases[i]=canvas;
            // add the context for this new canvas to the contexts array
            contexts[i]=ctx;
        }  

    }

    // test -- just fill the specified canvas with the specified color
    function draw(canvasIndex,newColor){
        var canvas=canvases[canvasIndex];
        var ctx=contexts[canvasIndex];
        ctx.beginPath();
        ctx.fillStyle=newColor;
        ctx.rect(0,0,canvas.width,canvas.height);
        ctx.fill();
    }


}); // end $(function(){});
</script>

</head>

<body>
    <div id="canvasContainer"></div>
</body>
</html>

动态画布DrawImage函数

1 个答案: