画布元素似乎被禁用
我使用 canvas 元素来显示带有补丁的地图，这些补丁根据从 MySQL 查询获取的值进行着色并写入 JavaScript 数组。它在我的两台电脑（Firefox 4、IE 9 和 Safari）上运行良好。但是当我在学校做演示时，使用 IE 8（也许这会是一个问题）和 Firefox 3.6（应该可以），画布不可见。我看不出有什么办法可以禁用它！学校的 IT 人员做了什么？我该如何测试并绘制常规图像图？
I've used a canvas element to show a map with patches that are colored according to values obtained from a MySQL query and written into a javascript array. It works fine on my two computers, in Firefox 4, IE 9, and Safari. But when I did a demo at school, with both IE 8 (maybe that would be a problem) and Firefox 3.6 (should work) the canvas was not visible. I can't see any way it can even be disabled! What have the IT guys at the school done, and how can I test for it and draw a regular image map instead?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
IE8 不支持画布。您可以使用 excanvas 来模拟它。
其次，IIRC，浏览器没有义务将画布的宽度和高度设置为任何值。您可以尝试设置
width和height属性。UPD：如果您提供页面的片段，那就太好了。在执行此操作之前，请先了解一些有关如何缩小问题范围的想法。
确保您的页面文档类型设置为
。确保不存在有关不支持
canvas的消息（即放置在和之间的文本）显示（在 Firefox 3.6 中不应出现这种情况，但尽管如此）。为您的画布元素设置
style='border:solid;'。检查边框是否绘制在预期位置。将
canvas封装到div元素中，并确保其显示在预期位置（例如通过设置style='border:solid;'也适用于它）。如果显示画布和/或包装元素的边框但没有绘图，则绘图代码存在一些错误。如果不是，则元素定位（例如 CSS 变得疯狂）或加载文档本身存在问题。
UPD：我在启用 Firebug 的情况下运行网站，它在
drawImage调用时显示异常。但仅适用于浏览器会话中页面的第一次加载。
原因是（我猜）当您将 src 设置为图像地址时，它不会立即加载，并且在此之前无法绘制它。因此抛出异常并且其余代码不执行。
您应该为图像设置
onload处理程序（请参阅此处）并在此处理程序中完成其余的绘图。如果有帮助请告诉我。
IE8 doesn't support canvas. You can use excanvas to emulate it.
Second, IIRC, browsers are not obliged to set canvas width and height to any value. You may try to set
widthandheightattributes.UPD: It will be nice if you provide a fragment of your page. Before you do this, some ideas on how to narrow problem.
Ensure that your page doctype is set to
<!doctype html>.Ensure that no messages about
canvasbeing not supported (i.e. text put between<canvas>and</canvas>) are displayed (it shouldn't happen with Firefox 3.6, but nevertheless).Set
style='border:solid;'for your canvas element. Check if border is drawn at expected position.Enclose
canvasintodivelement and make sure it is displayed at expected position (e.g. by settingstyle='border:solid;'for it as well).If border for canvas and/or wrapping element is displayed but there's no drawing, then there's some error with drawing code. If it is not then there's problem with element positioning (e.g. CSS went wild) or loading document per se.
UPD: I ran site with Firebug enabled and it shown an exception at
drawImagecall.But only for the first load of page in the browser session.
The reason is (I guess) that when you set
srcto image address, it is not loaded immediately, and drawing it impossible until then. So exeption is thrown and the rest of coded is not executed.You should set
onloadhandler for images (see here) and do the rest of drawing in this handler.Let me know if it helps.