Excanvas для динамически создаваемых элементов холста

Question

Excanvas "для enternet Explorer" отлично работает для предопределенных элементов холста. Но когда речь идет о динамическом создании элементов canvas во время сценария, это не сработает...

Есть идеи??

Answer 1

Из документации:

Если вы создали свой элемент canvas динамически, к нему не будет добавлен метод getContext. Чтобы заставить его работать, вам нужно вызвать initElement для объекта G_vmlCanvasManager.

var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');

Answer 2

Я добавляю его в документ перед вызовом initElement, и он работает для ie8, chrome и ff. Мне понадобилось время, чтобы понять это.

var foo = document.getElementById("targetElementID");
var canvas = document.createElement('canvas');
canvas.setAttribute("width", 620);
canvas.setAttribute("height", 310);
canvas.setAttribute("class", "mapping");
foo.appendChild(canvas);
canvas = G_vmlCanvasManager.initElement(canvas);

Answer 3

Я думаю, что нашел трюк с этим. IE не знает, что такое "canvas", поэтому, когда вы создаете элемент canvas с помощью javascript, он не работает.

Другие примеры, которые я видел, делают это, чтобы создать свой холст:

var el = document.createElement('canvas');//this doesn't work in IE

Так что хитрость заключается в том, чтобы просто обмануть IE, создав что-то законное и вызвав вместо него инициализацию canvas.

Я использовал jquery для создания ajax GET для этого блока html, который затем вставил в DOM:

<div id="canvasholder">
    <canvas id="mycanvas" width="1024" height="768" style="width:1024px;height:768px"></canvas>
</div>

В JavaScript после завершения вызова ajax и вставки HTML я выполняю инициализацию Canvas. Это просто интересный фрагмент из моей функции инициализации.

...
canvas = $('#mycanvas').get(0);//get dom element from jquery
if(!canvas.getContext)//function doesn't exist yet
{
//we're in IE if we reach this block
//otherwise getContext already exists
$('#canvasholder').empty();
//add #mycanvas as a div instead of a canvas
//you could use document.createElement('div') instead of jquery
$('#canvasholder').append(
    '<div id="mycanvas" width="1024" height="768"></div>');
canvas = $('#mycanvas').get(0);
if(typeof G_vmlCanvasManager  != 'undefined' )
{
    canvas = G_vmlCanvasManager.initElement(canvas);
}
}
//now you're set up to draw!
context = canvas.getContext("2d");
...

Теперь это работает для меня как в Firefox, так и в IE7.