0

for ループで 25 個のキャンバス要素を自動的に埋めるのに問題があります。それらは次のように番号が付けられています: can01to 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しかし、動的にする方法が本当にわかりません。たとえば、キャンバス要素番号。5 (can05) この場合、石のテクスチャのようになります。

あなたのアイデアを読むのをとても楽しみにしています。私はそれを理解していません。

4

1 に答える 1

3

配列を使用してキャンバスを整理するという 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];

なんで5じゃなくて4なの？配列はゼロから始まるため、canvases[0] は can01 を保持します。したがって、配列要素 4 には 5 番目のキャンバス「can05」が含まれます。

したがって、次のように「can05」の描画コンテキストを取得できます。

var context=contexts[4];

Dave が言うように、「eval は悪」なので、「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 );

それでおしまい！

悪の評価は打ち負かされました (警告: 二度とコンピュータに招待しないでください!)

コード例と Fiddle は次のとおりです: http://jsfiddle.net/m1erickson/ZuU2e/

このコードは、25 個の html キャンバス要素をハードコーディングするのではなく、25 個のキャンバスを動的に作成します。

<!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>
于 2013-06-02T23:09:45.613 に答える