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

你打电话：

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);
}

Answer 2

我不知道您是否只提供相关代码，或者您尚未实施相关代码，但我认为它应该是这样的。

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索引。

我可以使用数组来引用分层画布的上下文吗？

2 个答案: