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

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

6 голосов
/ 28 октября 2009

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

Есть идеи ??

Ответы [ 3 ]

13 голосов
/ 28 октября 2009

С документация :

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

var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');
8 голосов
/ 03 декабря 2009

Я добавляю его в документ перед вызовом 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);
4 голосов
/ 23 марта 2010

Я думаю, что нашел трюк с этим. IE не знает, что такое «холст», поэтому, когда вы создаете элемент 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.

...