当前位置：文江博客话题详情

Excanvas 用于动态创建的画布元素

发布于 2024-08-08 17:07:51 字数 103 浏览 7 评论 0原文

Excanvas“for Enternet Explorer”对于预定义的画布元素运行良好。但是，当涉及到在脚本期间动态创建画布元素时，它将不起作用......

有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如梦初醒的夏天 2024-08-15 17:07:51

来自文档：

如果您已经创建了画布
动态元素不会有
getContext 方法添加到
元素。为了让它工作，你需要
调用 initElement
G_vmlCanvasManager 对象。

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

From the documentation:

If you have created your canvas
element dynamically it will not have
the getContext method added to the
element. To get it working you need to
call initElement on the
G_vmlCanvasManager object.

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

回复收藏 0 原文

猥︴琐丶欲为 2024-08-15 17:07:51

我在调用 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);

I append it to the document before calling initElement and it works for ie8, chrome, and ff. Took me a while to figure it out.

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

回复收藏 0 原文

轻许诺言 2024-08-15 17:07:51

我想我已经找到了解决这个问题的窍门。 IE 不知道什么是“画布”，因此当您使用 JavaScript 创建画布元素时，它不起作用。

我见过的其他例子都是这样做来创建画布的：

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

所以诀窍是通过创建合法的东西并在其上调用画布初始化来欺骗 IE。

我使用 jquery 对这个 html 块执行 ajax GET，然后将其插入到 DOM 中：

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

在 ajax 调用完成并插入 HTML 后的 javascript 中，我进行画布初始化。这只是我的 init 函数中有趣的片段。

...
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 中都有效。

I think I've found the trick to this. IE doesn't know what a "canvas" is, so when you create a canvas element with your javascript, it doesn't work.

Other examples I've seen do this to create their canvas:

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

So the trick is to just fool IE by creating something legal and calling the canvas initialization on it instead.

I used jquery to do an ajax GET for this block of html which I then inserted into the DOM:

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

In the javascript after the ajax call has completed and the HTML is inserted, I do my canvas initialization. This is just the interesting snippet from my init function.

...
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");
...

This is now working for me in both Firefox and IE7.

回复收藏 0 原文

~没有更多了~