canvas.getContext не является функцией, когда вызывается на холсте

Question

Я встречаю ошибку, когда getContext не может быть вызван, хотя элемент является холстом.

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

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

<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

I th чернила Элемент «холст» рассматривается как неизвестный элемент «холст» SVG на d3. Таким образом, элемент «canvas» не отображается в HTMLCanvasElement, а SVGUnknownElement в domtree документа, поэтому getContext из SVGUnknownElement не установлен.

Чтобы решить эту проблему, вы должны обернуть элемент «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> 

Или используйте элемент изображения вместо элемента "canvas", чтобы поместить изображение, созданное элементом (html) холста.

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