CN103336690A

CN103336690A - 基于html5的文字元素绘制方法及装置

Info

Publication number: CN103336690A
Application number: CN2013102662242A
Authority: CN
Inventors: 许昆鹏
Original assignee: Ucweb Inc
Current assignee: Alibaba China Co Ltd
Priority date: 2013-06-28
Filing date: 2013-06-28
Publication date: 2013-10-02
Anticipated expiration: 2033-06-28
Also published as: WO2014206169A1; CN103336690B

Abstract

本发明提供了一种基于HTML5的文字元素绘制方法，包括：在接收到基于HTML标签和CSS样式创建的要被绘制的文字元素内容的文字样式后，从所述文字样式中提取出各个文字元素以及对应的HTML标签；对各个HTML标签进行解析，获取各个HTML标签中的CSS样式；将Canvas画布的样式上下文设置为所获取的CSS样式；以及调用所述Canvas画布来绘制对应的文字元素。利用该方法，通过使用基于HTML标签和CSS样式创建的文字样式，解析出HTML标签中的CSS样式并设置为Canvas画布的样式上下文，并利用该画布绘制文字元素，可以提高“具有多个样式”的一段文字的绘制效率，降低了后续的维护难度。

Description

基于HTML5的文字元素绘制方法及装置

技术领域

本发明涉及网页渲染领域，更为具体地，涉及基于HTML5的文字元素绘制方法及装置。

背景技术

HTML5（Hyper Text Markup Language，第五个版本超文本标记语言）里的文字绘制功能是通过Canvas“画布”实现。如果要改变文字的样式，比如颜色、大小等，则需要在画布中对文字的样式进行定义设置。由此，如果要绘制的一段文字中存在多个文字样式，则需要通过编写代码来人工地设置画布的样式，并且每个文字样式都要编写代码，从而导致在实现文字绘制时用户需要编写大量的代码，降低了开发效率，增加了后续的维护难度。比如，如果需要绘制“你好”，其中“你”是红色36px的字，“好”是绿色24px的字，则实现的代码如下：

var c=document.getElementById("myCanvas")；

var ctx = c.getContext("2d")；

ctx.font = "36px 黑体"；//这里要设置字体大小

ctx.fillStyle = "red"；//这里设置字体颜色

ctx.fillText("你", 0, 0)；//绘制“你”这个字，后面的0 0表示文字的起始坐标

ctx.font = "24px 黑体"；//这里要重复设置

ctx.fillStyle = "green"；//这里也要重复设置

ctx.fillText("好", 36, 0);//绘制“好”这个字，后面的36 0表示坐标，放在“你”字的后面，需要错开位置。

…

如果一段文字中存在更多的文字样式，则需要如上所述不停重复地编写代码，从而使得开发效率低，并且后续的维护难度变大。

发明内容

鉴于上述，本发明提出了一种基于HTML5的文字元素绘制方法及装置，其能够通过使用基于HTML标签和CSS样式创建的文字样式，解析出HTML标签中的CSS样式并设置为Canvas画布的样式上下文，并利用该画布绘制文字元素，由此提高一段“具有多个样式”的文字的绘制效率，降低后续的维护难度。

根据本发明的一个方面，提供了一种基于HTML5的文字元素绘制方法，包括：在接收到基于HTML标签和CSS样式创建的要被绘制的文字元素内容的文字样式后，从所述文字样式中提取出各个文字元素以及对应的HTML标签；对各个HTML标签进行解析，获取各个HTML标签中的CSS样式；将Canvas画布的样式上下文分别设置为所获取的CSS样式；以及调用所述Canvas画布来绘制对应的文字元素。

在上述方面的一个或多个示例中，所述文字样式是字符串。

在上述方面的一个或多个示例中，调用Canvas画布来绘制对应的文字元素是针对每个文字元素执行的。

在上述方面的一个或多个示例中，在对各个HTML标签进行解析，获取各个HTML标签中的CSS样式后，所述方法还可以包括：将所述文字元素和对应的CSS样式存储在缓存中。

在上述方面的一个或多个示例中，在对各个HTML标签进行解析，获取各个HTML标签中的CSS样式后，所述方法还可以包括：根据所获取的CSS样式，对所述文字元素进行分组，其中，具有相同CSS样式的文字元素在同一文字组中，并且调用Canvas画布来绘制对应的文字元素是针对每个文字组执行的。

在上述方面的一个或多个示例中，在接收到基于HTML标签和CSS样式创建的要被绘制的文字元素的文字样式后，所述方法还可以包括：检查要被绘制的文字元素内容相对于上次绘制的文字元素内容是否发生了变化，以及在未发生变化时，从所述缓存中读取对应的文字元素和CSS样式来调用Canvas画布进行文字元素绘制，或者在发生变化时，对所述文字元素内容的文字样式进行解析来获取对应的文字元素和CSS样式，从而调用Canvas画布进行绘制。

在上述方面的一个或多个示例中，所述CSS样式包括字体大小、字体颜色和字体样式。

根据本发明的另一方面，提供了一种基于HTML5的文字元素绘制装置，包括：提取单元，用于在接收到基于HTML标签和CSS样式创建的要被绘制的文字元素内容的文字样式后，从所述文字样式中提取出各个文字元素以及对应的HTML标签；解析单元，用于对各个HTML标签进行解析，获取各个HTML标签中的CSS样式；设置单元，用于将Canvas画布的样式上下文设置为所获取的CSS样式；以及调用单元，用于调用Canvas画布来绘制对应的文字元素。

在上述方面的一个或多个示例中，所述设置单元被配置为针对每个文字元素，将Canvas画布的样式上下文设置为所获取的CSS样式，以及所述调用单元被配置为调用Canvas画布来对应的文字元素。

在上述方面的一个或多个示例中，所述文字元素绘制装置还可以包括缓存，用于在对各个HTML标签进行解析，获取各个HTML标签中的CSS样式后，缓存所述文字元素和对应的CSS样式。

在上述方面的一个或多个示例中，所述文字元素绘制装置还可以包括分组单元，用于在对各个HTML标签进行解析，获取各个HTML标签中的CSS样式后，根据所获取的CSS样式，对所述文字元素进行分组，其中，具有相同CSS样式的文字元素在同一文字组中，并且针对每个文字组，所述设置单元被配置为将Canvas画布的样式上下文设置为与该文字组对应的CSS样式，以及所述调用单元被配置为调用Canvas画布来绘制该文字组中的所有文字元素。

在上述方面的一个或多个示例中，所述文字元素绘制装置还可以包括：检查单元，用于在接收到基于HTML标签和CSS样式创建的要被绘制的文字元素的文字样式后，检查要被绘制的文字元素内容相对于前一被绘制的文字元素内容是否发生变化；以及读取单元，用于在未发生变化时，从所述缓存中读取对应的文字元素和CSS样式，以供使用来调用Canvas画布进行绘制，以及所述提取单元和解析单元被配置为在发生变化时，从所述文字样式中提取各个文字元素以及对应的HTML标签以及对各个HTML标签进行解析，获取各个HTML标签中的CSS样式。

利用上述文字元素绘制方法及装置，通过使用基于HTML标签和CSS样式创建的文字样式，解析出HTML标签中的CSS样式并设置为Canvas画布的样式上下文，并利用该画布绘制文字元素，可以提高“具有多个样式”的一段文字的绘制效率，降低了后续的维护难度。

为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。然而，这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。

附图说明

根据下述参照附图进行的详细描述，本发明的上述和其他目的、特征和优点将变得更加显而易见。在附图中：

图1示出了根据本发明的第一实施例的基于HTML5的文字元素绘制方法的流程图；

图2示出了根据本发明的第一实施例的基于HTML5的文字元素绘制方法的示例的示意图；

图3示出了根据本发明的第一实施例的基于HTML5的文字元素绘制装置的方框示意图；

图4示出了根据本发明的第二实施例的基于HTML5的文字元素绘制方法的流程图；

图5示出了根据本发明的第二实施例的基于HTML5的文字元素绘制装置的方框图；和

图6示出了具有根据本发明的文字元素绘制装置的移动终端的方框示意图。

在所有附图中相同的标号指示相似或相应的特征或功能。

具体实施方式

下面描述本公开的各个方面。应该明白的是，本文的教导可以以多种多样形式具体体现，并且在本文中公开的任何具体结构、功能或两者仅仅是代表性的。基于本文的教导，本领域技术人员应该明白的是，本文所公开的一个方面可以独立于任何其它方面实现，并且这些方面中的两个或多个方面可以按照各种方式组合。例如，可以使用本文所阐述的任何数目的方面，实现装置或实践方法。另外，可以使用其它结构、功能、或除了本文所阐述的一个或多个方面之外或不是本文所阐述的一个或多个方面的结构和功能，实现这种装置或实践这种方法。此外，本文所描述的任何方面可以包括权利要求的至少一个元素。

下面将参照附图描述本发明的各个实施例。

图1示出了根据本发明的第一实施例的基于HTML5的文字元素绘制方法的流程图，所述方法由利用DOM中的html标准和CSS标准创建的文字组件执行，该文字组件用于解析html，CSS的字体样式，在文字组件里面的处理完成后，再输出到画布。

如图1所示，首先，在步骤S110，在接收到基于HTML标签和CSS样式创建的要被绘制的文字元素内容的文字样式后，从所述文字样式中提取出各个文字元素以及对应的HTML标签。在本发明的一个示例中，所述文字样式是字符串。例如，将针对要被绘制的文字元素内容的具有html标签和CSS样式的文字样式以字符串形式传送到文字组件后，文字组件从所述文字样式中提取出各个文字元素以及对应的HTML标签。

然后，在步骤S120，对各个HTML标签进行解析，获取各个HTML标签中的CSS样式。所述CSS样式可以包括字体大小、字体颜色和字体样式（加粗、斜体等）。

然后，在步骤S130，从第一个文字元素开始，将针对该文字元素获取的CSS样式设置为Canvas画布的样式上下文，即，将所获取的CSS样式输出到Canvas画布的样式上下文。

接着，在步骤S140，调用如上设置了样式上下文的Canvas画布来绘制该文字元素，随后流程进行到步骤S150。在步骤S150，判断是否针对所有文字元素完成绘制操作。如果是，则流程结束。否则，流程返回到步骤S130，针对下一文字元素，重复执行步骤S130，直到针对所有文字元素完成绘制。

图2示出了根据本发明的第一实施例的基于HTML5的文字元素绘制方法的示例的示意图。

如图2所示，要绘制的文字元素内容是“恭喜来宾1886在欢乐斗牛中获胜60局，获得了金宝箱”。在本发明的文字元素绘制方法中，使用了html标签和css样式创建要被绘制的文字元素内容的文字样式，所创建的文字样式为 “恭喜来宾1886在欢乐斗牛中获胜60局，获得了金宝箱”。

在文字组件接收到该文字样式后，首先，提取出与文字元素相关的HTML标签，即，与“恭喜”相关的HTML标签“”，与“来宾1886”相关的HTML标签“”，与“在”相关的HTML标签“”，与“欢乐斗牛”相关的HTML标签“”，与“中获胜”相关的HTML标签“”，与“60”相关的HTML标签“”，以及与“局，获得了金宝箱“相关的HTML标签””。

然后，对各个HTML标签进行解析，获得对应的CSS样式。在获得CSS样式后，将该CSS样式设置为Canvas画布的样式上下文，接着，利用该Canvas画布绘制文字元素。

针对上述文字元素内容，在现有的文字元素绘制方法中，针对每个有颜色变化的文字元素，都需要创建一个文字样式，然后按照从左到右的顺序绘制到canvas中，这样编写代码的工作量非常大，而且远程取数据需要特定的格式才可以实现。

而在根据本发明的方法中，仅仅需要创建一个文字样式，开发者也无需关心文字样式之间的顺序，从而大大简化了开发流程。

图3示出了根据本发明的第一实施例的基于HTML5的文字元素绘制装置300的方框示意图。

如图3所示，文字元素绘制装置300包括提取单元310、解析单元320、设置单元330以及调用单元340。

提取单元310用于在接收到基于HTML标签和CSS样式创建的要被绘制的文字元素内容的文字样式后，从所述文字样式中提取出各个文字元素以及对应的HTML标签。

解析单元320用于对各个HTML标签进行解析，获取各个HTML标签中的CSS样式。

接着，从第一个文字元素开始，设置单元330将Canvas画面的样式上下文设置为针对该文字元素获取的CSS样式，然后，调用单元340用于调用如上设置样式上下文的Canvas画布来制该文字元素。接着，针对下一文字元素，重复执行设置单元330和调用单元340的操作，直到绘制完所有文字元素为止。

图4示出了根据本发明的第二实施例的基于HTML5的文字元素绘制方法的流程图。

如图4所示，在接收到基于HTML标签和CSS样式创建的要被绘制的文字元素内容的文字样式后，在步骤S410，检查要被绘制的文字元素内容相对于上次绘制的文字元素内容是否发生了变化。例如，在进行检查时，可以通过判断文字组件中的text属性是否发生变化。该text属性会记录上次的内容，在绘制文字时，将当前的text属性与上次相比，如果属性发生了变化，则说明字符串组发生了变化。

在未发生变化时，流程进行到步骤S435，从所述缓存中读取对应的文字元素和CSS样式来调用Canvas画布进行文字元素绘制。如果发生变化，则进行到步骤S415。步骤S415到步骤S420与图1中的步骤S110到步骤S120相同，在此不再描述。

在获取CSS样式后，在步骤S425，根据所获取的CSS样式，对所述文字元素进行分组，其中，具有相同CSS样式的文字元素在同一文字组中。然后，在步骤S430，将文字元素组的文字元素以及对应的CSS样式缓存到缓存中，然后，流程进行到步骤S435。

在读取出缓存中的数据后，在步骤S440，将文字组的CSS样式设置为Canvas画布的样式上下文。然后，在步骤S445，调用该Canvas画布来绘制该文字组中的所有文字元素。

接着，在步骤S450，判断是否针对所有文字组完成绘制操作。如果是，则流程结束。否则，流程返回到步骤S440，针对下一文字组，重复执行步骤S440和S445，直到针对所有文字组完成绘制。

图5示出了根据本发明的第二实施例的基于HTML5的文字元素绘制装置500的方框图。

如图5所示，文字元素绘制装置500包括检查单元510、提取单元520、解析单元530、缓存540、分组单元550、读取单元560、设置单元570和调用单元580。

检查单元510用于在接收到基于HTML标签和CSS样式创建的要被绘制的文字元素的文字样式后，检查要被绘制的文字元素内容相对于上一被绘制的文字元素内容是否发生变化。

提取单元520用于在接收到基于HTML标签和CSS样式创建的要被绘制的文字元素内容的文字样式后，从所述文字样式中提取出各个文字元素以及对应的HTML标签。

解析单元530用于对各个HTML标签进行解析，获取各个HTML标签中的CSS样式。

缓存540用于在对各个HTML标签进行解析，获取各个HTML标签中的CSS样式后，缓存所述文字元素和对应的CSS样式。

分组单元550用于在对各个HTML标签进行解析，获取各个HTML标签中的CSS样式后，根据所获取的CSS样式，对所述文字元素进行分组，其中，具有相同CSS样式的文字元素在同一文字组中。

读取单元560用于从所述缓存中读取对应的文字元素和CSS样式，以供使用来调用Canvas画布进行绘制。

针对每个文字组，设置单元570被配置为将Canvas画布的样式上下午设置为与该文字组对应的CSS样式，以及调用单元580被配置为调用Canvas画布来绘制该文字组，即，绘制该文字组中的所有文字元素。重复设置单元570和调用单元580的操作，直到完成所有文字组的绘制。

图6示出了具有根据本发明的文字元素绘制装置的移动终端10的方框示意图。

如图6所示，所述移动终端10包括如图3或图5所示的文字元素绘制装置。这里要说明的是，图6中包含的文字元素绘制装置还可以包括图3或图5中所示的文字元素绘制装置的各种变型。

此外，典型地，本发明所述的移动终端可为各种智能移动终端，比如智能手机等。

此外，根据本发明的方法还可以被实现为由移动终端中的处理器（比如CPU）执行的计算机程序，并且存储在移动终端的存储器中。在该计算机程序被处理器执行时，执行本发明的方法中限定的上述功能。

此外，根据本发明的方法还可以实现为一种计算机程序产品，该计算机程序产品包括计算机可读介质，在该计算机可读介质上存储有用于执行本发明的方法中限定的上述功能的计算机程序。

此外，上述方法步骤以及系统单元也可以利用控制器以及用于存储使得控制器实现上述步骤或单元功能的计算机程序的计算机可读存储设备实现。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。为了清楚地说明硬件和软件的这种可互换性，已经就各种示意性组件、方块、模块、电路和步骤的功能对其进行了一般性的描述。这种功能是被实现为软件还是被实现为硬件取决于具体应用以及施加给整个系统的设计约束。本领域技术人员可以针对每种具体应用以各种方式来实现所述的功能，但是这种实现决定不应被解释为导致脱离本发明的范围。

尽管前面公开的内容示出了本发明的示例性实施例，但是应当注意，在不背离权利要求限定的本发明的范围的前提下，可以进行多种改变和修改。根据这里描述的发明实施例的方法权利要求的功能、步骤和/或动作不需以任何特定顺序执行。此外，尽管本发明的元素可以以个体形式描述或要求，但是也可以设想多个，除非明确限制为单数。

虽然如上参照图描述了根据本发明的各个实施例进行了描述，但是本领域技术人员应当理解，对上述本发明所提出的各个实施例，还可以在不脱离本发明内容的基础上做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。

Claims

1.一种基于HTML5的文字元素绘制方法，包括：

在接收到基于HTML标签和CSS样式创建的要被绘制的文字元素内容的文字样式后，从所述文字样式中提取出各个文字元素以及对应的HTML标签；

对各个HTML标签进行解析，获取各个HTML标签中的CSS样式；

将Canvas画布的样式上下文设置为所获取的CSS样式；以及

调用所述Canvas画布来绘制对应的文字元素。

2.如权利要求1所述的文字元素绘制方法，其中，所述文字样式是字符串。

3.如权利要求1所述的文字元素绘制方法，其中，调用Canvas画布来绘制对应的文字元素是针对每个文字元素执行的。

4.如权利要求1所述的文字元素绘制方法，其中，在对各个HTML标签进行解析，获取各个HTML标签中的CSS样式后，所述方法还包括：

将所述文字元素和对应的CSS样式存储在缓存中。

5.如权利要求1所述的文字元素绘制方法，其中，在对各个HTML标签进行解析，获取各个HTML标签中的CSS样式后，所述方法还包括：

根据所获取的CSS样式，对所述文字元素进行分组，

其中，具有相同CSS样式的文字元素在同一文字组中，并且调用Canvas画布来绘制对应的文字元素是针对每个文字组执行的。

6.如权利要求3所述的文字元素绘制方法，其中，在接收到基于HTML标签和CSS样式创建的要被绘制的文字元素的文字样式后，所述方法还包括：

检查要被绘制的文字元素内容相对于前一被绘制的文字元素内容是否发生变化，以及

在未发生变化时，从所述缓存中读取对应的文字元素和CSS样式来调用Canvas画布进行绘制，或者

在发生变化时，对所述文字元素内容的文字样式进行解析来获取对应的文字元素和CSS样式，从而调用Canvas画布进行绘制。

7.如权利要求1所述的文字元素绘制方法，其中，所述CSS样式包括字体大小、字体颜色和字体样式。

8.一种基于HTML5的文字元素绘制装置，包括：

提取单元，用于在接收到基于HTML标签和CSS样式创建的要被绘制的文字元素内容的文字样式后，从所述文字样式中提取出各个文字元素以及对应的HTML标签；

解析单元，用于对各个HTML标签进行解析，获取各个HTML标签中的CSS样式；

设置单元，用于将Canvas画布的样式上下文设置为所获取的CSS样式；以及

调用单元，用于调用所述Canvas画布来绘制对应的文字元素。

9.如权利要求8所述的文字元素绘制装置，其中，所述设置单元被配置为针对每个文字元素，将Canvas画布的样式上下文设置为所获取的CSS样式，以及所述调用单元被配置为调用Canvas画布来对应的文字元素。

10.如权利要求8所述的文字元素绘制装置，还包括

缓存，用于在对各个HTML标签进行解析，获取各个HTML标签中的CSS样式后，缓存所述文字元素和对应的CSS样式。

11.如权利要求8所述的文字元素绘制装置，还包括：

分组单元，用于在对各个HTML标签进行解析，获取各个HTML标签中的CSS样式后，根据所获取的CSS样式，对所述文字元素进行分组，其中，具有相同CSS样式的文字元素在同一文字组中，并且

针对每个文字组，所述设置单元被配置为将Canvas画布的样式上下文设置为与该文字组对应的CSS样式，以及所述调用单元被配置为调用Canvas画布来绘制该文字组中的所有文字元素。

12.如权利要求11所述的文字元素绘制装置，还包括：

检查单元，用于在接收到基于HTML标签和CSS样式创建的要被绘制的文字元素的文字样式后，检查要被绘制的文字元素内容相对于前一被绘制的文字元素内容是否发生变化；以及

读取单元，用于在未发生变化时，从所述缓存中读取对应的文字元素和CSS样式，以供使用来调用Canvas画布进行文字元素绘制，以及

所述提取单元和解析单元被配置为在发生变化时，从所述文字样式中提取各个文字元素以及对应的HTML标签以及对各个HTML标签进行解析，获取各个HTML标签中的CSS样式。