[英]Can I use an array to reference the context of layered canvases?
I have written a function that's capable of creating multiple layered canvases and I want to reference the context of each with an array (ctx[n]) but I am really struggling to understand what I'm doing wrong. 我已经编写了一个能够创建多层画布的函数,并且我想用一个数组(ctx [n])引用每个画布的上下文,但是我真的很难理解我做错了什么。 I'm fairly new to javascript so would appreciate any help. 我对javascript还是相当陌生,所以希望能对您有所帮助。
I've separated out my code into a test document(see below). 我已经将我的代码分离到一个测试文档中(见下文)。 I'm using [0] as a testing base. 我正在使用[0]作为测试基础。 If I substitute ctx[0] with any other variable name the code works. 如果我将ctx [0]替换为任何其他变量名称,则该代码有效。 Am I doing something really stupid? 我在做些很愚蠢的事情吗? or is it just not possible to use an array for this purpose? 还是无法为此目的使用数组?
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;
}
You call: 您致电:
textFade(1,"Hello!");
But the signature is: 但是签名是:
function textFade(ctx,text)
So you pass the index not the object or array. 因此,您传递的索引不是对象或数组。
You should change your code like so: 您应该这样更改代码:
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);
}
I do not know if you simply did not supply the relevant code, or you haven't implemented it, but I image it should look like this. 我不知道您是否只是没有提供相关代码,或者您尚未实现它,但是我想像它应该像这样。
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;
}
I would also not set all those css properties this way. 我也不会以这种方式设置所有这些CSS属性。 Use a style class to modify all canvases with the common settings and then manually set the z index. 使用样式类使用通用设置修改所有画布,然后手动设置z索引。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.