在画布上调用时canvas.getContext不是函数

Question

我遇到一个错误，即使该元素是画布，也无法调用getContext。

var canvas = document.getElementById(id);
console.log(canvas, canvas.nodeName);
var ctx = canvas.getContext('2d');

谢谢！

它的片段是独立运行的，但不能在脚本中运行

var canvas = document.getElementById(id);
console.log(canvas, canvas.nodeName);
var ctx = canvas.getContext('2d');

var canvas = document.getElementById( '0_0' );
document.write(canvas.getContext('2d'));

<canvas x=?"-8" y=?"-8" id=?"0_0">? "canvas"
Uncaught TypeError: canvas.getContext is not a function
  at Array.populateNodes (script.js:95)
  at Array.Co.call (d3.v3.min.js:3)
  at gen_graph (script.js:63)
  at Object.success (main.js:16)
  at i (jquery.min.js:2)
  at Object.fireWith [as resolveWith] (jquery.min.js:2)
  at A (jquery.min.js:4)
  at XMLHttpRequest.<anonymous> (jquery.min.js:4)

js，使用d3：

抱歉我的JS有多糟糕，我很陌生

Answer 1

我认为d3将“画布”元素视为SVG的未知“画布”元素。因此，“画布”元素不映射到HTMLCanvasElement，但SVGUnknownElement在文件domtree，从而getContext()的SVGUnknownElement是undefined。

要解决此问题，您应该逐个包裹“ canvas” foreignObject元素，并将xhtml命名空间添加到“ canvas”元素中。

我不擅长d3，请尝试使用d3构造此结构。

<g class="node" transform="translate(210,330)">
  <foreignObject x="-8" y="-8">
    <canvas id="0_0" xmlns="http://www.w3.org/1999/xhtml"></canvas>
  </foreignObject>
</g>

或使用image元素代替“ canvas”元素来放置由（html）canvas元素创建的图像。

SVG结构

<g class="node" transform="translate(210,330)">
  <image x="-8" y="-8" id="0_0"/>
</g>

JavaScript代码

//create canvas element.
//var canvas = document.getElementById(nodes[i].__data__.name);
var canvas = document.createElement("canvas");
//console.log(canvas, canvas.nodeName);
var ctx = canvas.getContext('2d');

canvas.width = width;
canvas.height = height;

var idata = ctx.createImageData(width, height);
idata.data.set(buffer);
ctx.putImageData(idata, 0, 0);

//set image created by canvas to image element.
var image = document.getElementById(nodes[i].__data__.name);
image.width.baseVal.value = width;
image.height.baseVal.value = height;
image.href.baseVal = canvas.toDataURL();