`
songofhawk
  • 浏览: 26396 次
  • 来自: ...
社区版块
存档分类
最新评论

在canvas中绘制文本(stroke text in canvas element)

阅读更多

最近对一些在线应用(乘着云计算的忽悠风)很感兴趣,特别是在线的图形处理,于是稍稍学习了一点canvas开发。

 

有了cavas元素,浏览器就可以原生支持矢量绘图——当然还是以相当底层的方式。不过简陋一点没关系,仅凭写进HTML5标准这一点,就足够让它脱颖而出,受到热烈追捧了;以至于出现了专门基于canvas的游戏库:GameJS,在它上面至少可以流畅地运行俄罗斯方块。

 

不幸的是,不是所有主流浏览器都能完整支持canvas。Chrome 2.0+貌似实现得不错。Firefox就差强人意,到3.0版也只实现了个七七八八。IE就更不用说了,它甚至根本就没打算支持(嗯,微软的发言人确实说过他们会考虑的);不过,google code上有一个基于VML的canvas实现:explorercanvas,可以给IE“安上”这个标准;性能据说不错,某些情况下,甚至还超过了chrome和firefox的原生支持。Opera和Safari没用过,不知实现效果如何。

 

现在回到正题,在cavas中绘制文本——这个很基本的功能却被许多浏览器初期实现自动忽略了。于是大家八仙过海,各显神通地来克服这个困难。有篇blog(Rendering text with <canvas>)专门总结了4种自行绘制文本的方法:

 

  1. 用独立的htm元素,叠放到canvas上:比如每次调用strokeText都生成一个div,然后用css绝对定位把它放到canvas上面适当的位置。典型例子是TextCanvas;这种方式的最大问题就是文本和画布(canvas)其实是分离的,没法整体做变换(比如平移、旋转、放大之类的),而且文本自身也很难旋转(看看一大堆求CSS旋转文字的帖子就知道了)。
  2. 用特定浏览器的drawWindow方法实现:这个比较诡异,貌似是chrome独有的方法,现在应该没啥大用了;
  3. 用cavas的drawImage()方法来“画”文本:这个倒是能实现直接显示在canvas中,可以整体进行transform,做个平移、旋转啥的还不错;当然,放大、缩小效果就不那么好了。更为致命的问题是,英文也还罢了,咱大不了把ASCII字符都做成图片字库,中文咋办,难道要学毕昇...。貌似博主自己写了个bitmap font库,当然只支持英文。
  4. 直接用矢量图把文字“画”出来。不得不承认老外就是敢想敢干(no harm),这等吃力不讨好的事,居然有不止一个实现,还都成熟度挺高。博主举的例子都有些老了,当前最流行的大概是strokeText,前面提到的GameJS就用了它;这个方法的最大问题就是性能,GameJS的作者这样评价“Canvas doesn’t support the drawString method yet, and the performance of the alternative I currently use (strokeText.js) is quite bad”。Google code上还有个看起来挺象样子的project:canvas-text,支持一大堆字体,当然不可能有中文。想想把每个汉字都一笔一笔画出来,还得处理提笔和顿笔,浏览器会发疯的

这样看来竟然没有什么好办法了——其实也没那么悲观,答案就是。。。直接用浏览器的标准实现。有人该说这不废话嘛,浏览器要实现了,你前面还罗哩罗嗦说一堆干嘛。呵呵,问题是这世界变化快啊,目前不支持,不表示将来也不支持啊,而且它们的支持是有铁证的:

 

  1. Chrome:目前的最流行的2.0版就支持了
  2. Firefox:3.5版可以支持,现在可以下载到的 3.5 beta 4
  3. IE:这个稍麻烦一点,excanvas的最新release,r3版还不支持,不过直接找源码的话,就会发现从r58开始加入了text特性,最新版本是r60。应该说这个不算原生支持,不过既然excanvas项目是google自己在支撑,还是可以信任的。
  4. Opera:一向宣称最契合标准的浏览器,当然也义无反顾地支持啦(未验证,但在其中文官网上有文档介绍)
  5. Safari:传说中canvas标签就是Safari引入的,想必应该支持吧

BTW: canvas的应用还不够成熟,到现在甚至都没有一个像样API文档。

 

 

分享到:
评论

相关推荐

    canvas 如何绘制线段的实现方法

    在Web开发中,使用canvas元素绘制线段是一个基础且重要的技能。通过绘制一系列的线段...通过这些基础知识的学习,你可以开始尝试使用canvas绘制更加复杂的图形和图表,并逐渐深入到动画效果和canvas在服务器端的应用。

    qml 虚线绘制 多种绘制方式

    1. **Canvas绘制虚线** Canvas是QML中的一个基本元素,它允许我们使用JavaScript进行2D图形绘制。要绘制虚线,我们需要使用`beginPath()`,`moveTo()`,`lineTo()`以及`strokeStyle`属性。以下是一个简单的虚线绘制...

    wpf 绘制矩形 可动态调整矩形大小

    在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现动态绘制矩形以及允许用户通过拖动矩形的四个角来调整其大小的功能。这个功能在各种图形编辑工具或界面设计应用中非常常见,它能提供...

    jquery基于html5和canvas实现的连线问题代码.zip

    4. **连接线绘制**:在Canvas上绘制连接线通常涉及到`beginPath`、`moveTo`和`lineTo`方法。首先,`beginPath`开始一个新的路径,然后`moveTo`移动到起点,最后`lineTo`画出从当前位置到目标位置的直线。可能还使用...

    示例源码canvas.7z

    在实际应用中,Canvas常被用在游戏开发、数据可视化、图表绘制等领域。例如,它可以用于创建动态图表,实时展示数据的变化;在游戏开发中,Canvas可以绘制游戏场景、角色动作,甚至实现简单的物理模拟。 总的来说,...

    毛笔刷画板Canvas特效.zip

    4. 文字渲染:使用`fillText()`和`strokeText()`方法在Canvas上绘制文本。 5. 图像处理:`drawImage()`函数可以用来在Canvas上绘制图片,支持缩放、裁剪等操作。 二、jQuery特效 1. jQuery简介:jQuery是一个广泛...

    火焰燃烧Canvas特效.zip

    在这个特效中,开发者可能利用了Canvas的`fillStyle`和`strokeStyle`设置颜色,`beginPath()`开始路径,`moveTo()`和`lineTo()`绘制路径,`arc()`绘制圆弧,以及`fill()`和`stroke()`填充或描边路径。 火焰燃烧特效...

    html5 canvas圆形转盘抽奖特效.zip

    在这个项目中,我们可能会使用`canvas.getContext('2d')`来获取2D渲染上下文,然后调用如`beginPath()`、`arc()`、`fill()`或`stroke()`等方法来画出转盘的圆形轮廓和指针。 接着,CSS将用于美化我们的抽奖转盘。...

    html5 canvas彩色条纹旋涡动画特效.zip

    在这个特效中,CSS可能被用来设置Canvas元素的位置、大小以及整个页面的风格,同时可能包含了关键帧动画(@keyframes)来配合Canvas动画,增强视觉体验。 现在,让我们深入探讨一下实现这种特效可能涉及的技术细节...

    透明线条游动Canvas特效.zip

    首先,Canvas API提供了丰富的绘图工具,如`beginPath()`用于开始一个新的路径,`moveTo()`和`lineTo()`用于定义线条的起点和终点,`stroke()`用于绘制线条。透明线条的实现则需要用到`strokeStyle`属性,可以设置为...

    H5 Canvas彩色丝带动画特效.zip

    在网页设计中,H5 Canvas元素是一个强大的工具,它允许开发者直接在浏览器上进行图形绘制,从而实现各种复杂的动画效果。"H5 Canvas彩色丝带动画特效"是利用Canvas API来创建的一种动态视觉表现,通常用于提升用户...

    Canvas中设置width与height的问题浅析

    在HTML5中,Canvas是一个强大的绘图工具,允许开发者通过JavaScript动态绘制图形、动画和复杂的交互式内容。本文主要探讨了Canvas中设置`width`和`height`属性时可能出现的问题及其解决方案。 首先,Canvas元素在...

    Canvas仿信用卡电子签名特效.zip

    Canvas API包括各种绘图方法,如`beginPath()`、`moveTo()`、`lineTo()`和`stroke()`,用于绘制路径和线条。 2. **CSS**: CSS用于控制网页元素的样式,包括布局、颜色、字体等。在本项目中,CSS可能用于设置Canvas...

    html5属性canvas实现性能堪比native体验效果的烟花播放效果.zip

    在烟花效果中,可能会用到`arc()`(绘制圆弧)来模拟烟花轨迹,以及`fill()`和`stroke()`来填充或描边图形。 描述中提到的jQuery插件和jQuery特效,表明这个烟花效果可能利用了jQuery库来简化DOM操作和事件处理。...

    awesome-canvas:精选HTML5 Canvas精选清单,并提供示例,相关文章和文章

    在这个"awesome-canvas"资源列表中,你会找到许多示例代码,它们展示了如何使用Canvas API实现各种效果,如粒子系统、游戏、图表绘制等。粒子系统是Canvas应用的一个常见用途,通过生成大量小的图形元素(粒子),...

    js canvas实现画图、滤镜效果

    上述代码片段中,我们使用了context.beginPath()来清除之前绘制的路径,context.moveTo()来移动画笔到指定位置,context.lineTo()来绘制线条到指定位置,最后调用context.stroke()来绘制线条。 ### 滤镜效果实现 ...

Global site tag (gtag.js) - Google Analytics