FlashCanvas让IE支持Canvas的JavaScript库_H5之家 - 中国HTML5教程资源分享第一站

FlashCanvas是一个JavaScript库，通过添加HTML5的Canvas标签来支持浏览器。它可以通过flash绘图API来绘制形状和图像。它支持几乎所有的Canvas API，并且在很多情况下，运行速度比其他使用VML或Silverlight的类似库更快！

FlashCanvas让IE支持Canvas的JavaScript库

FlashCanvas简介

通过Flash来使Internet Explorer支持HTML5 Canvas的javascript库，因此运行环境需要Microsoft Internet Explorer和Adobe Flash Player 9（或更早的版本）。目前FlashCanvas Pro通过了超过70%的HTML5 Canvas测试!

testsuite-20110204

安装FlashCanvas

大家可以通过官网的下载地址获取的FlashCanvas源代码，FlashCanvas由JavaScript、Flash和PHP文件：

FlashCanvas

flashcanvas.js

flashcanvas.swf

FlashCanvas Pro

Optional files

这些文件可以发布包的bin目录中找到。安装FlashCanvas,将这些文件复制到Web服务器目录,然后在你的Web页面添加以下HTML代码到<head>标签内。

同时，你应该检查你的网站是在IE9标准模式浏览时用IE9。在其他的文件模式，IE9无法显示画布元素。

初始化Canvas元素

在flashcanvas.js被加载时，它会自动初始化HTML文档的Canvas元素。但在下列情况下，您需要手动初始化单元通过调用FlashCanvas.initElement()方法。

如果你创建了一个动态Canvas元素，使用document.createElement(“canvas”)。

如果你在window.onload之前使用Canvas元素

使代码的跨浏览器，你也应该检查flashcanvas存在的对象。这里是一个示例代码：

var canvas = document.createElement("canvas"); document.getElementById("target").appendChild(canvas); if (typeof FlashCanvas != "undefined") { FlashCanvas.initElement(canvas); } 使用FlashCanvas而不是ExplorerCanvas

现有的一些Canvas应用上，例如 Flot and JavaScript InfoVis Toolkit 使用 ExplorerCanvas 来支持 Internet Explorer，为了确保ExplorerCanvas兼容性，FlashCanvas也实现了G_vmlCanvasManager对象及其方法。因此，如果你的使用flashcanvas.js来代替excanvas.js，大多数这些应用程序将不修改你的代码。

保存Canvas为图片

当你需要将Canvas画布保存为为图像文件，Canvas2Image库是一种常用的解决方案。然而不幸的是，这个库不工作以及一些浏览器，如 Internet Explorer。

作为一种替代和跨浏览器的解决方案，我们准备canvas2png.js脚本，与所有主流浏览器。这个脚本可以节省画布图像作为一种具有save.php脚本支持PNG文件。canvas2png.js只提供了一个canvas2png()方法，这需要一个HTMLCanvasElement作为参数，可以采用以下方式。

var canvas = document.getElementById("mycanvas"); canvss2png(canvas);

它也支持flashcanvas用户从右键菜单保存画布图像。

更多使用方法请访问：