`
ck_2036
  • 浏览: 78198 次
  • 性别: Icon_minigender_1
  • 来自: 常州
社区版块
存档分类
最新评论

给excanvas添加fillText方法

阅读更多
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
2
0
分享到:
评论
4 楼 AsFirstSight 2014-09-18  
psj1605 写道
太感谢了 没你这方法 我的项目都没法往下做了    
有办法让excanvas支持toDataURL属性吗?



可以支持 toDataURL吗??
3 楼 isky 2012-11-16  
good!
2 楼 psj1605 2012-05-07  
太感谢了 没你这方法 我的项目都没法往下做了    
有办法让excanvas支持toDataURL属性吗?
1 楼 chaos2003 2011-11-30  
太厉害了!非常感谢

相关推荐

    给excanvas添加fillText方法实战代码

    总结来说,"给Excanvas添加`fillText`方法实战代码"涉及了如何在不支持HTML5 Canvas的IE浏览器中模拟`fillText`方法,以实现跨浏览器的文本绘制功能。这个过程中可能遇到的问题包括Excanvas的API限制、文本测量的...

    excanvas.min.js_0.8.3.zip

    在实际应用中,Excanvas.js的使用方法通常是将它作为外部脚本引入到HTML页面中,像这样: ```html &lt;!--[if IE]&gt;&lt;script type="text/javascript" src="excanvas.min.js"&gt;&lt;/script&gt;&lt;![endif]--&gt; ``` 这段代码会检测...

    excanvas_r3.zip

    在使用Excanvas时,只需在HTML页面中引入excanvas.js,并在Canvas元素上添加`class="g_vml_class"`或`class="hasFlash"`,就可以使IE8支持Canvas。 压缩包中的其他文件也非常重要: 1. testcases:这是测试Excanvas...

    excanvas_canvas.js_

    2. **绘图API**:Excanvas提供了与HTML5 Canvas相似的绘图API,如`fillText()`用于绘制文本,`beginPath()`和`stroke()`用于绘制路径,`arc()`用于绘制圆弧,`translate()`和`rotate()`用于变换坐标系等。...

    IE8添加canvas支持之excanvas

    IE8添加canvas支持 1.添加对html5的支持: &lt;!--[if IE]&gt; [removed][removed] ...下载excanvas_r3.zip,引用excanvas.compiled.js。 &lt;!--[if IE]&gt; [removed][removed] [removed][removed] &lt;![endif]--&gt;

    excanvas.compiled.zip

    6. **使用方法**:在页面中引入`excanvas.compiled.js`后,开发者可以通过`G_v2.0.Excanvas`实例化一个Canvas元素,然后就可以像在其他现代浏览器中一样使用Canvas API进行绘图。 7. **实例化Canvas**:通常,你...

    excanvas_r3.zip解决了ie8不支持canvas

    6. **testcases**:这是一个测试用例目录,包含了一些示例代码,用于验证Excanvas的功能和性能,开发者可以通过这些案例了解Excanvas的使用方法。 7. **examples**:此目录可能包含了一些使用Excanvas的实际例子,...

    excanvas设计实例.zip

    4. 渐变和阴影:Excanvas也支持创建线性渐变和径向渐变,以及添加阴影效果,这能让你的图形更加丰富多彩。 5. 图像处理:可以使用`drawImage()`方法将图片绘制到Canvas上,甚至进行裁剪、缩放和旋转等操作。 6. ...

    excanvas_r3 使IE支持canvas

    4. **README**:这是一个常见的文档,通常会简要介绍Excanvas_r3的用途、安装方法、使用示例以及可能的注意事项。 5. **testcases** 文件夹:这可能包含了一些测试用例,用于验证Excanvas_r3的功能和性能。开发者...

    excanvas.js--图形JS

    这时,我们需要在jqPlot前端加载Excanvas.js,这样jqPlot就能利用Excanvas.js提供的VML功能,实现在不支持Canvas的IE浏览器上显示图表。 使用Excanvas.js的过程大致如下: 1. 在HTML文档的`&lt;head&gt;`部分引入jQuery...

    excanvas笔记

    在使用Excanvas时,你需要在页面中引入excanvas.js文件,并在需要使用canvas的地方添加一个`&lt;canvas&gt;`标签。然后,可以通过JavaScript的`document.createElement('canvas')`方法获取canvas元素,再通过`G_...

    Google Javascript画线功能excanvas

    通过`fillRect`、`strokeRect`可以画矩形,`arc`可以画圆或弧线,`drawImage`用于在画布上显示图片,`fillText`和`strokeText`用于添加文字。 测试Excanvas的功能,可以查看`testcases`目录下的示例代码,这些案例...

    excanvas最新版本,解决ie8不兼容问题

    然后,可以创建一个`&lt;canvas&gt;`元素,并使用JavaScript获取其引用,接着调用Excanvas的初始化方法,如下所示: ```javascript var canvas = document.getElementById('myCanvas'); G_vmlCanvasManager.initElement...

    excanvas-modified.js

    excanvas-modified.js

    excanvas.js

    excanvas.js js画图插件。

    excanvas.js下载

    excanvas.js免费下载 希望可以帮到有需要的朋友

    excanvas.compiled.js 下载

    excanvas.compiled.js相关

    excanvas.js jQuery 曲线绘制(图表)插件

    excanvas.js jQuery 曲线绘制(图表)插件.excanvas 使得 IE 能通过 VML 支持 Canvas 标签

Global site tag (gtag.js) - Google Analytics