excanvas使得IE能通过VML支持Canvas标签,但是在一些细节方面还是不尽人意.
比如
1.动态生成的Canvas对象将不支持getContext方法,
2.drawImage方法不能用Canvas对象作为第一个参数,
3.不支持fillText等方法.
本文针对以上三个问题给出改进方案.
1.要使IE中的Canvas对象支持getContext等方法需要调用excanvas中的G_vmlCanvasManager_.initElement方法,由于最后的
G_vmlCanvasManager = G_vmlCanvasManager_;
使得G_vmlCanvasManager的作用域是当前window,所以在需要初始化Canvas的时候可以采用如下的方法:
var cav = document.createElement("canvas");
if(!cav.getContext) {
G_vmlCanvasManager.initElement(cav);
}
var ctx = cav.getContext("2d");
...
2.excanvas中的drawImage方法只接受Image对象为第一个参数,为了使其支持Canvas对象的绘制,可修改如下代码(在excanvas.js中检索到"contextPrototype.drawImage"所在行):
contextPrototype.drawImage = function(image, var_args) {
if (image.getContext) { // draw canvas
this.element_.innerHTML += image.getContext("2d").element_.innerHTML;
}
var dx, dy, dw, dh, sx, sy, sw, sh;
...
3.fillText,measureText也已成为CanvasRenderingContext2D对象的标准方法,为了使IE也能支持,在excanvas.js中添加以下代码:
contextPrototype.measureText = function(textToDraw) {
var hiddenSpan = document.createElement('span');
hiddenSpan.style.font = this.font;
hiddenSpan.innerHTML = textToDraw;
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.appendChild(hiddenSpan);
var width = hiddenSpan.offsetWidth;
bodyNode.removeChild(hiddenSpan);
return {"width" : width + 1};
}
contextPrototype.fillText = function(textToDraw, x, y) {
var vmlStr = [];
var textHeightStr = this.font.split("px")[0].replace(/(^\s+)|(\s+$)/g, "");
var textHeight = /^\d+$/.test(textHeightStr) ? parseInt(textHeightStr) : 0;
vmlStr.push('<g_vml_:shape style="font:' + this.font + ';',
' color:' + this.fillStyle + ';',
' position:absolute;',
' left:' + x + 'px;',
' top:' + (y - textHeight) + 'px;',
' width:' + this.measureText(textToDraw).width + 'px;',
' height:' + textHeight + 'px;"',
' ><g_vml_:textbox inset="0,0,0,0">' + textToDraw,
' </g_vml_:textbox>',
'</g_vml_:shape>');
this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
}
其中measureText是通过在页面上添加一个隐藏的临时文字容器并获得其宽度来实现.
另外在属性声明的地方要添加默认字体:
// Canvas context properties
this.strokeStyle = '#000';
this.fillStyle = '#000';
this.font = '12px sans-serif';
...
如果还有其他的什么需求或是想法 欢迎与我联系 ck0123456@gmail.com
分享到:
相关推荐
总结来说,"给Excanvas添加`fillText`方法实战代码"涉及了如何在不支持HTML5 Canvas的IE浏览器中模拟`fillText`方法,以实现跨浏览器的文本绘制功能。这个过程中可能遇到的问题包括Excanvas的API限制、文本测量的...
在实际应用中,Excanvas.js的使用方法通常是将它作为外部脚本引入到HTML页面中,像这样: ```html <!--[if IE]><script type="text/javascript" src="excanvas.min.js"></script><![endif]--> ``` 这段代码会检测...
在使用Excanvas时,只需在HTML页面中引入excanvas.js,并在Canvas元素上添加`class="g_vml_class"`或`class="hasFlash"`,就可以使IE8支持Canvas。 压缩包中的其他文件也非常重要: 1. testcases:这是测试Excanvas...
2. **绘图API**:Excanvas提供了与HTML5 Canvas相似的绘图API,如`fillText()`用于绘制文本,`beginPath()`和`stroke()`用于绘制路径,`arc()`用于绘制圆弧,`translate()`和`rotate()`用于变换坐标系等。...
IE8添加canvas支持 1.添加对html5的支持: <!--[if IE]> [removed][removed] ...下载excanvas_r3.zip,引用excanvas.compiled.js。 <!--[if IE]> [removed][removed] [removed][removed] <![endif]-->
6. **使用方法**:在页面中引入`excanvas.compiled.js`后,开发者可以通过`G_v2.0.Excanvas`实例化一个Canvas元素,然后就可以像在其他现代浏览器中一样使用Canvas API进行绘图。 7. **实例化Canvas**:通常,你...
6. **testcases**:这是一个测试用例目录,包含了一些示例代码,用于验证Excanvas的功能和性能,开发者可以通过这些案例了解Excanvas的使用方法。 7. **examples**:此目录可能包含了一些使用Excanvas的实际例子,...
4. 渐变和阴影:Excanvas也支持创建线性渐变和径向渐变,以及添加阴影效果,这能让你的图形更加丰富多彩。 5. 图像处理:可以使用`drawImage()`方法将图片绘制到Canvas上,甚至进行裁剪、缩放和旋转等操作。 6. ...
4. **README**:这是一个常见的文档,通常会简要介绍Excanvas_r3的用途、安装方法、使用示例以及可能的注意事项。 5. **testcases** 文件夹:这可能包含了一些测试用例,用于验证Excanvas_r3的功能和性能。开发者...
这时,我们需要在jqPlot前端加载Excanvas.js,这样jqPlot就能利用Excanvas.js提供的VML功能,实现在不支持Canvas的IE浏览器上显示图表。 使用Excanvas.js的过程大致如下: 1. 在HTML文档的`<head>`部分引入jQuery...
在使用Excanvas时,你需要在页面中引入excanvas.js文件,并在需要使用canvas的地方添加一个`<canvas>`标签。然后,可以通过JavaScript的`document.createElement('canvas')`方法获取canvas元素,再通过`G_...
通过`fillRect`、`strokeRect`可以画矩形,`arc`可以画圆或弧线,`drawImage`用于在画布上显示图片,`fillText`和`strokeText`用于添加文字。 测试Excanvas的功能,可以查看`testcases`目录下的示例代码,这些案例...
然后,可以创建一个`<canvas>`元素,并使用JavaScript获取其引用,接着调用Excanvas的初始化方法,如下所示: ```javascript var canvas = document.getElementById('myCanvas'); G_vmlCanvasManager.initElement...
excanvas-modified.js
excanvas.js js画图插件。
excanvas.js免费下载 希望可以帮到有需要的朋友
excanvas.compiled.js相关
excanvas.js jQuery 曲线绘制(图表)插件.excanvas 使得 IE 能通过 VML 支持 Canvas 标签