Question

我正在开发一个使用canvas元素的Firefox扩展。它是以编程方式添加的（canvas元素从一开始就没有，它是创建的，然后我尝试追加）。

XUL中使用的代码（mozilla XML）非常简单，添加了NO元素，只使用公共标记加载脚本。

我遇到的问题首先是线路问题 var myCtx = myCanvas.getContext（“2d”）; 运行时，firefox控制台错误返回TypeError：myCanvas.getContext不是函数。

然后，另一个错误是，即使我不尝试绘制画布或任何东西，当我运行代码时，将画布附加到文档正文的行也不起作用，返回该文档。未定义。

脚本如下：

endSelectBox : function(aEvent){
mouseX2 = aEvent.clientX;
mouseY2 = aEvent.clientY;

//Start creating new canvas to be added in this position.
var canvasWidth, canvasHeight;
canvasWidth = Math.abs(mouseX2 - mouseX); //Calculates canvas width to be used.
canvasHeight = Math.abs(mouseY2 - mouseY); //Calculates canvas height to be used.

alert("pre id height width");
//Set canvas values for size.
var myCanvas;
myCanvas = document.createElement("canvas");
myCanvas.setAttribute("id", "canvas1");
myCanvas.setAttribute("height", canvasHeight.toString());
myCanvas.setAttribute("width", canvasHeight.toString());

//Set canvas fixed position on the page.
alert("pre CSS");
var top = Math.max(mouseY, mouseY2);
top = top.toString();
top = top + "px";
var left = Math.min(mouseX, mouseX2);
left = left.toString();
left = left + "px";
myCanvas.style.top = top;
myCanvas.style.left = left;
//myCanvas.style.position = "fixed";

//Paint canvas interior.  //Not working because getContext returns null. No idea why, try to figure this out.
alert("pre painting");
var myCtx = myCanvas.getContext("2d");
alert("pre fillstyle");
myCtx.fillStyle = "#150000";
alert("pre fillrect");
myCtx.fillRect(0,0, canvasWidth - 1, canvasHeight - 1);

document.body.appendChild(myCanvas);// This never runs. WHY??
alert("worked");

}

Answer 1

解决方案是使用document.createElementNS（）函数创建元素，并且在访问文档时，如用户powerc9000所说，我们需要使用content.document才能正确访问它。干杯！

Answer 2

从this link

在Firefox中进行扩展时

要从browser.xul overlay获取当前网页的文档，您应该使用content.document，而不仅仅是文档，它是浏览器窗口本身的文档。

因此，请尝试将所有document更改为content.document，以解决您的问题。

TypeError：myCanvas.getContext不是函数

2 个答案: