配列を使用してレイヤードキャンバスのコンテキストを参照できますか？

Question

複数のレイヤーを持つキャンバスを作成する機能を記述しましたが、配列（ctx [n]）でそれぞれのコンテキストを参照したいのですが、私が間違っていることを理解するのは本当に苦労しています。私はかなりjavascriptに新しいので、任意のヘルプに感謝します。

私は自分のコードをテスト文書に分割しました（下記参照）。私はテストベースとして[0]を使用しています。私がctx [0]を他の変数名に置き換えると、コードは機能します。私は何か本当に愚かなことをしていますか？またはこの目的のために配列を使用することはできませんか？

あなたが呼び出す

var ctx = []; 
var canv = []; 
txt.innerHTML = "Paragraph text has been changed"; 
createCanv(0, 0, 0, 250, 100, 2); 
textFade(1, "Hello!"); 

function textFade(ctx, text){ 
    ctx[0].clearRect(0, 0, canv[0].width, canv[0].height); 
    ctx[0].font = "bold 25px verdana"; 
    ctx[0].fillStyle = "rgba(255, 0, 0, 0.9)"; 
    ctx[0].fillText(text,canv[0].width/2,canv[0].height/2); 
} 

function createCanv(c, x, y, w, h, z) { 
    canv[0] = document.createElement("canvas"); 
    canv[0].id = "canv" + c; 
    document.body.appendChild(canv[0]); 
    canv[0].style.background = "rgba(196, 196, 255, 0.8)"; 
    canv[0].style.position = "absolute"; 
    canv[0].style.top = y + "px"; 
    canv[0].style.left = x + "px"; 
    canv[0].style.zIndex = z; 
    canv[0].width = w; 
    canv[0].height = h; 
} 

Answer 1

は、私にはわからない、またはあなたがそれを実装していないが、私は、画像には、次のようになります。

あなたはそうのようにコードを変更する必要があります。

var ctx=[]; 
var canv=[]; 
txt.innerHTML="Paragraph text has been changed"; 
var canvas = createCanv(0, 0, 0, 250, 100, canv.length); // this assumes each new canvas will sit on top of the previous 
canv.push(canvas); 
ctx.push(canvas.getContext("2d")); 
textFade(ctx.length - 1,"Hello!"); 

function textFade(ctxInd,text){ 
    ctx[ctxInd].clearRect(0,0,canv[ctxInd].width,canv[ctxInd].height); 
    ctx[ctxInd].font="bold 25px verdana"; 
    ctx[ctxInd].fillStyle="rgba(255,0,0,0.9)"; 
    ctx[ctxInd].fillText(text,canv[ctxInd].width/2,canv[ctxInd].height/2); 
} 

function createCanv(c, x, y, w, h, z) { 
    var can = document.createElement("canvas"); 
    can.id = "canv" + c; 
    document.body.appendChild(can); 
    can.style.background = "rgba(196,196,255,0.8)"; 
    can.style.position = "absolute"; 
    can].style.top = y + "px"; 
    can.style.left = x + "px"; 
    can.style.zIndex = z; 
    can.width = w; 
    can.height = h; 
    return can; 
} 

このようなCSSプロパティもすべてこの方法で設定しません。スタイルクラスを使用して、共通の設定ですべてのキャンバスを変更し、zインデックスを手動で設定します。

Answer 2

：

textFade(1,"Hello!"); 

しかし、署名は次のとおりです。

function textFade(ctx,text) 

ですから、インデックスではないオブジェクトや配列を渡します。あなたは、単に、関連するコードを指定しなかった場合は

function textFade(ctx,text){ 
    canv[ctx].clearRect(0,0,canv[0].width,canv[0].height); 
    canv[ctx].font="bold 25px verdana"; 
    canv[ctx].fillStyle="rgba(255,0,0,0.9)"; 
    canv[ctx].fillText(text,canv[0].width/2,canv[0].height/2); 
}