使用 HTML 标记来补充 canvas,第 1 部分 : 混合使用 canvas API 和 HTML/CSS 模型

集两种模型的优势于一身

HTML canvas 具有诸多优点,包括高性能、低负荷和直接像素处理功能。不过,canvas 所欠缺的恰恰是 HTML 所擅长的:文本呈现、SEO、可访问性以及与设备无关的标记。本文将对传统 HTML 模型和 canvas API 的优点进行比较,探索一个将两种模型的优点集于一身的混合 HTML/Canvas 应用程序,还将了解一些在 canvas 元素上添加 HTML 元素的不同技巧。

Kevin Moot, 软件开发人员, The Nerdery

Kevin Moot 照片Kevin Moot 从很小的时候就对计算机图形有浓厚的兴趣,那时他在自己的 Apple IIe(具有六种颜色的巨大矩阵以及令人震撼的 280x192 分辨率)上创建游戏。他还将 HTML5 的 Canvas 技术应用于几个前沿网站,HTML/CSS、JavaScript 和 .NET 也是他的专长。Kevin 目前是 The Nerdery 的一名交互软件开发人员。



Ryan DeLuca, 软件开发人员, The Nerdery

Ryan DeLuca 的照片Ryan DeLuca 从 1998 年起就开始了他的编程生涯,几年后,他又成为一名自由职业者。他决定接受正规的培训并于 2011 年从 Wisconsin-Superior 大学毕业,获得理学学士学位。毕业后不久,Ryan 加入了 Nerdery,成为一名软件工程师,他的专长包括 PHP、JavaScript、CSS 和 HTML。他的其他才能包括关系数据库/SQL 和图形处理。



2013 年 2 月 05 日

简介

本系列文章共两部分,在第 1 部分中,将创建将 canvas API 和 HTML/CSS 两种模型的优点结合在一起的应用程序。canvas API 是要求高性能、低负荷图形的 Web 应用程序的理想选择。然而,如果仅仅围绕 canvas 设计整个应用程序而忽略传统 HTML/CSS 模型的优点则不免短视。与其想当然,不如学习一些在 HTML/CSS 中非常有用但在 canvas 中难以或无法实现的功能。

常用缩略词

  • API:应用程序编程接口
  • CSS:级联样式表
  • HTML:超文本标记语言
  • UI:用户界面

本文将采用一种 “混合” 方法来设计应用程序,使之能够同时利用传统的 HTML 组件和 canvas 元素。本文稍后将讨论采用这种方法的目的,包括为什么完全基于 canvas 的实现不够理想,并讨论传统 HTML 模型与 canvas API 相比的优点和缺点。一些示例还帮助您在设计应用程序时规划 HTML 和 canvas 元素的布局和交互。

您可以 下载 本文使用的示例源代码。


HTML 和 CSS 模型的优点

在一些场景中,使用 HTML 和 CSS 的传统 web 模型更具优势。本节将探讨 HTML 模型的最有用的优点,该模型在 canvas API 中并没有受到很好的支持,或者根本不受支持,特别是其健壮的文本支持和与语义 HTML 标记有关的优点。

HTML 的健壮文本支持

HTML 的一个强项就是它能够轻松地利用样式符号对文本添加注解,包括 <b></b> 之类的格式化标记和 font-weight:bold 等 CSS 规则。

另一方面,canvas API 公开了 fillText() 方法,将文本字符串呈现为一个位图。这是一种简单、低级的调用,但是有诸多限制。最大的限制之一就是只能对提供给 fillText() 的文本字符串应用一种统一的样式规则。这里所说的 “样式规则” 可以看作是一个用于设置字体、大小、颜色等的规则(类似 CSS 规则)。

采用统一样式的文本

考虑图 1 中的文本。

图 1. 样式文本
使用红色字体显示的文字:variety is the spice of life

由于文本包含一个统一的样式规则(红色、斜体和宋体字),您使用 HTML/CSS 或 canvas 都能够很好地显示这一文本。

清单 1 和清单 2 中的代码比较了如何使用 HTML 和 CSS 以及 canvas 呈现这个文本。请参阅 参考资料 中的例子。

清单 1 显示了使用 HTML 和 CSS 呈现的图 1 中的文本。

清单 1. 在 HTML 和 CSS 中使用统一样式呈现文本
<style>
    .uniform-style {
        font: italic 12px Arial;
        color: red;
    }   
</style>
<span class="uniform-style">
    Variety is the spice of life!
</span>

清单 2 展示了使用 canvas 呈现的同一文本。

清单 2. 在 canvas 中使用统一样式呈现文本
var canvas = document.getElementById('my_canvas');
var context = canvas.getContext('2d');

context.font = 'italic 12px Arial';
context.fillStyle = 'red';
context.fillText('Variety is the spice of life!', 0, 50);

采用动态样式的文本

考虑图 2 中的文本。

图 2. 采用动态样式的文本
采用不同颜色和大小呈现的文本:variety is the spice of life

清单 3 给出了呈现文本所需的 CSS 规则。

清单 3. 在 HTML 和 CSS 中使用动态规则呈现文本
<style>
    .dynamic-style {
        font: 12px Arial;
        color: blue;
    }
    .dynamic-style strong {
        font-size : 18px;
        color: green;
    }    
    .dynamic-style em {
        color: red;
        font-weight: bold;
        font-style: italic;
    }    
</style>
<span class="dynamic-style">
    <strong>Variety</strong> is the <em>spice of life</em>!
</span>

因为 canvas API 中未提供 HTML 标记或 CSS 类等概念,而这些概念允许您对不同字体样式进行注解,因此呈现前例中相同的文本块变得十分复杂。

由于 canvas API 可以充当一个连续的状态机,因此要产生图 2 的效果需要采用称为 “canvas API” 的方法。您必须选择一种要使用的样式,输入需要使用该样式的部分文本,再选择另一种样式,然后输入文本的下一部分,诸如此类。

通常,可以通过以下算法实现这一过程:

  1. 为文本的下一部分设置要使用的样式(18px Arial,绿色)。
  2. 向 canvas 呈现文本的下一个部分(变体)。
  3. 向右移动一定数量的像素 (60)。
  4. 对文本的每个部分重复步骤 1-3。

清单 4 显示了该算法最基本、原生的实现。

清单 4. 在 canvas 中使用动态样式呈现文本
context.font = '18px Arial';
context.fillStyle = 'green';
context.fillText('Variety', 0, 50);
context.translate(60, 0);  //move 60 pixels to the right (a)

context.font = '12px Arial';
context.fillStyle = 'blue';
context.fillText('is the', 0, 50);
context.translate(35, 0); //move 35 pixels to the right (b)

context.font = 'italic bold 12px Arial';
context.fillStyle = 'red';
context.fillText('spice of life!', 0, 50); // (c)

图 3 解释了在依次呈现三个不同的文本时它们是如何显示的。

图 3. 在 Canvas 中呈现的文本
“Variety” 显示为 a,“Variety is the” 显示为 b,“Variety is the spice of life” 显示为 c。

在本文后面,您将看到如何对这种方法进行改进,我们将在原生的 canvas fillText() 函数之上添加另一个抽象层。不管使用哪一种方法,typewriter 算法始终是核心。

应当注意,HTML/CSS 中的大部分文本样式(如文字环绕、字母间隔和行高)从一开始并不受 canvas API 支持。如有必要,需要您自己修改算法并实现这些功能。

至此,您应当很清楚地为什么文本呈现对于 canvas API 并不是一件容易的事,以及为什么传统的 HTML 模型在文本格式化方面表现更为出色。


HTML 的富有含义的语义

优秀的 Web 设计的一个重要因素就是有意义、语义正确的 HTML 结构。HTML 语义在编写时考虑了合适的结构和含义,因此具备许多优点。

canvas 的核心其实就是一个绘图仪,因此不存在有含义的标记这一概念,并且完全针对 canvas 编写的应用程序也无法利用有含义的 HTML 标记的诸多优点。例如,从搜索引擎和视力受损用户的角度来看,一个 canvas 元素实际上将显示为一个毫无意义的黑框。

下面,我们将研究有含义 HTML 标记的几个优点。

搜索引擎感知

搜索引擎根据自动化搜索机器人 (bot)/爬行器 (spider) 读取的信息创建它们的搜索索引,当一个搜索爬行器访问您的网页时,它将解析 HTML 来尽量多地提取有含义的信息。

由于在 canvas 上以编程方式显示的文本其实就是位图,因此搜索爬行器将完全忽略文本。因此,一定要注意如果您的整个应用程序都在 canvas 中开发,那么搜索爬行器几乎无法从您的页面中搜索到上下文信息。

尽管如此,搜索引擎仍然能够在 <canvas> 元素中读取任何回退 (fallback) 文本,该元素主要针对不兼容 HTML5 的浏览器,如清单 5 所示。

清单 5. canvas 元素中的回退文本
<canvas>
   We are sorry, your browser doesn't support HTML5!
</canvas>

这对于 canvas 来说并不是什么刚刚发现的问题,缺少搜索引擎感知能力一直以来都困扰着针对 Flash 和 Silverlight 等浏览器插件编写的应用程序。

可访问性

有视觉障碍的用户依靠文本朗读工具(屏幕阅读器)来读取网页上的内容。结构化 HTML 标记使屏幕阅读器能够区分页面、页脚和列表等。无法生成 HTML 标记的应用程序,如基于 canvas 的应用程序,其内容无法被屏幕阅读器识别。

结构良好的 HTML 还使用户能够使用标准的键盘快捷键来导航页面。例如,制表键将把焦点带到页面中的下一个链接,如图 4 所示。

图 4. 用制表键将焦点带到页面中的某个链接
W3C 网站的屏幕截图

甚至 Flash 和 SIlverlight 之类的浏览器插件在提供可访问性方面也迈出了一大步,它们支持通用的键盘快捷键。遗憾的是,canvas 没有为可访问性提供类似的内置兼容。

设备和用户代理

最终,由用户代理决定究竟以何种方式呈现您的页面。一些设备对同一 HTML 标记的解释可能不同于其他设备。例如,在大多数移动设备上,单击 <input type="text"> 元素会让设备在屏幕上显示一个键盘,使用户可以输入内容。遵循 HTML5 规范的浏览器提供了更加广泛的可用输入类型,如电子邮件、网站、电话和日期等。

图 5 显示了 <input type="date"> 元素如何显示在 iOS 设备上。浏览器自动显示一个全功能日期选择器;实现该日期选择器不需要任何额外的代码,只需将输入元素的类型定义为 date

图 5. iPhone 对 <input type="date"> 的处理
iphone 上日期条目的图片

在编写语义正确的 HTML 时,您实际上是对用户代理签订了一个协议,认为该用户代理能够以最适合该设备用户的方式呈现内容。

相比之下,canvas 元素中呈现的内容在所有设备上都始终如一。您将打破与用户代理的契约;认为设备并不知道如何以最佳方式呈现内容。

超链接感知

实际上,Web 是围绕超链接构建的,无法想象没有超链接的世界会是什么样。除了允许用户导航链接外,现代用户代理为用户提供了丰富的上下文特性:在新的选项卡中打开页面、复制链接地址和电子邮件链接等。

尽管文本可以呈现到 canvas 中,从理论上讲,并不存在超链接的概念。

即使您自己动手模拟一个超链接,呈现蓝色的带下划线的文本,用户代理仍然不会认为这是一个真正的超链接,因此无法向用户提供任何有用的上下文功能。


canvas API 的优点

了解了 HTML 的长处后,专为 canvas 编写的应用程序似乎一无所长。然而,围绕 canvas 构建解决方案也有一些优势。最主要的优势是 canvas 具有较高的图形性能,可实现跨设备的一致性。

图形性能

有一些任务使用 HTML 和 canvas 均能够完成,如呈现图像、文本和动画。

由于 canvas 不存在与解析 HTML 和维护分层文档模型有关的开销,因此,在 canvas 中这些任务总是要比在 HTML 中快。

在以 HTML 为中心的应用程序中,最消耗性能的因素就是添加、移除或更新节点。更新文档模型通常要求浏览器重现展示整个页面,这一个涉及大量计算的过程。在实时应用程序中需要每秒对文档模型进行多次更新,只会减缓浏览器的速度。

对于十分看重速度的场景,从以 HTML 为中心的架构切换到以 canvas 为中心的架构是实现最大性能的最佳方式。实现高性能的代价就是要处理低级 API,而非 HTML 等健壮的标记语言以及 CSS 的灵活性。

跨设备一致性

实现一致的、跨平台的呈现对于传统的 HTML/CSS 模型一直是个难题,因为浏览器布局引擎不一样。尽管可以跨平台实现极为相近的网页,但是很难在 “像素级别” 实现一致的设计。

当在 canvas 上绘制图形时,这些问题就迎刃而解。Canvas 支持对图形和文本的呈现进行像素级控制,并且保证输出在所有平台上都 100% 一致。


混合使用 canvas/HTML 的基本原理

在创建面向 canvas 的应用程序时,传统 HTML/CSS 模型的特性也可用于弥补 canvas 的短处。

如前所述,canvas 的一大弊端就是难以实现健壮的、可访问的 UI 组件。在确定实现 UI 的最佳方法时,评估 UI 元素的需求是一种很好的实践。需要考虑的评判标准包括:

  • UI 元素要显示的内容是什么?
  • 这些内容多久更新一次?
  • 需要何种程度的交互性(如果有的话)?

以上任意方面提出的需求都会对实现方式有很大影响。例如,如果所需的内容是以文本方式显示应用程序的某个方面,那么使用最基本的 HTML 元素将是最有效的方法,并且不会引起任何性能损失。然而,如果您希望元素具有动态效果,或富有频繁更新的内容,那么使用 canvas 可能更理想。如果要求具备易于交互的特性,那么 HTML 元素通常提供最自然的方法,特别是当结合使用 jQuery 等库提供的功能时。

接下来,我们将演示一些非常适合使用 canvas/HTML 混合实现的场景。

快速原型化

使用 HTML 和 CSS 实现快速原型化要比使用 canvas 快得多。例如,考虑一个包含菜单的应用程序。因为菜单非常适合 HTML/CSS 结构,并且您可以利用大量现有的库,如 jQuery 插件,因此与在 canvas 中的实现相比,在 HTML 中实现菜单所需的工作量非常小。对于原型化来说,HTML 引起的性能减退并不是什么大问题,因为使用它的目的是实现概念证明而不是一个完全优化的系统。

当应用程序实现增强后,原型化中采用 HTML 和 CSS 的部分未来可能会完全使用纯 canvas 实现。在菜单例子中,在最终产品中将菜单变为 canvas 将极大地改善性能,因为您去掉了对浏览器文档模型的依赖。

开发工具

开发工具可以很轻松地应用于 HTML 和 CSS,因为使用 HTML 标记可以很方便地显示大量的信息。一个例子就是在应用程序中添加控制台来实现调试的目的。调试控制台会显示统计数据,比如每秒帧数,应用程序中所有对象的列表以及它们的坐标等。

再次重申,在这种场景下引入 HTML 元素所造成的性能损失并不是什么大问题,因为这些工具只面向开发人员,并且永远也不会显示给最终用户。

用户界面覆盖

如果应用程序需要一个富 UI 来汇合来自不同元素的文本,如复选框和下拉菜单,那么 HTML 是最自然不过的选择。在 canvas 中重现这些类型的组件将耗费大量的时间,并且您的应用程序很可能会出现访问性问题。

相反,HTML 的优点可以提供丰富的用户体验。例如,基于 HTML 的 UI 组件的集合可以包含一个漂浮在 canvas 区域上的 “提醒 (heads up) 显示”。

为了最大程度减小对应用程序实时性能的影响,要注意尽可能少地对文档模型进行修改(元素更新、插入和移除)。如果文档更新非常频繁,那么应用程序的性能可能会非常慢。

伙伴用户界面

如果意图将某个 UI 元素显示在应用程序的交互式实时组件以外,那么此时十分适合使用 HTML 和 CSS。例如,UI 元素可能仅在开始启动顺序或应用程序暂停时出现。

加载/保存游戏界面是另一个可以利用基于 HTML 的伙伴用户界面示例。因为用户在保存游戏时将暂停游戏,因此不会对应用程序的实时性能产生影响。HTML/CSS 允许快速开发该界面,并利用了组织良好的标记的优点。


实现 canvas/HTML 混合模型

本节将介绍一些基本的方法,可以在一个网页布局中结合使用 canvas 元素和其他 HTML 元素。下面的方法虽然不是十分相近,但是提供了几个例子演示如何最佳地利用 HTML 和 canvas 二者的优点,同时最大程度弱化它们的缺陷。在为您的应用程序规划架构时,考虑哪一种方法(或几种方法)最适合用于实现您的目标。

下面的场景假设提供两个主要组件:

  • canvas 元素,其中包含主要的图形和动画组件
  • HTML 元素,其中包含 UI 的不同部分,比如菜单、导航元素和表格等

使用 canvas 元素

<canvas> 标记被认为是一个块级别的元素,因此组合 HTML 和 canvas 元素的最简单的方法就是将 <canvas> 元素插入到文档正文中。由于该元素默认情况下将使用相对位置,因此在文档其余部分中不需要对该 canvas 元素使用特殊的标记或 CSS。

使用 Canvas 作为前景元素

<canvas> 元素可以通过 z 索引采用绝对位置放到页面上,从而能够显示在前景中。

该方法适合于不需要与页面中其他 HTML 元素交互的 canvas 应用程序,类似于嵌入了一个 Flash 应用程序。

由于 canvas 是前景中最靠上的元素,因此 canvas 元素将能够捕捉到所有形式的用户输入(鼠标单击和触摸事件等)。

图 6 演示了将 canvas 定位为一个使用绝对位置的前景元素的方法。

图 6. 在文档上方对 canvas 元素进行分层
一个大的 HTML 方格,其中包含一个较小的 canvas 方格,另一个方格中分别包含一个 html 和 canvas 方格。

点击查看大图

图 6. 在文档上方对 canvas 元素进行分层

一个大的 HTML 方格,其中包含一个较小的 canvas 方格,另一个方格中分别包含一个 html 和 canvas 方格。

清单 6 中的代码演示了将元素放到前景层最上面位置所需的 CSS,采用了一个大的 Z 索引。

清单 6. 将 canvas 作为前景元素的 CSS
canvas {
    position: absolute;
    z-index: 100;
    bottom: 0px;
    right: 0px;
}

将 Canvas 作为背景元素

<canvas> 元素也可以用于在 Web 页面的背景中显示内容。

该方法可用于生成丰富的动画背景,位于标准的 HTML 内容下方。背景 canvas 场景将可以在文档内的任何透明区域显示。

图 7. 在文档下方对 canvas 元素分层
一个蓝色的 html 方格,在另一个显示 canvas 的方格上方显示实时图形。html 和 canvas 两个方格通过虚线相连。

点击查看大图

图 7. 在文档下方对 canvas 元素分层

一个蓝色的 html 方格,在另一个显示 canvas 的方格上方显示实时图形。html 和 canvas 两个方格通过虚线相连。

清单 7 中的代码显示了通过设置负 z 索引将 canvas 元素放到最底层。

清单 7. 将 canvas 放到背景中所需的 CSS
canvas {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0px;
}

在 canvas 上进行分层

另一种方法是在 canvas 元素上方对一个或多个 HTML 元素进行分层。如图 8 所示,该方法适合需要丰富 UI 组件的应用程序。对于这种情况,一组基于 HTML 的 UI 组件将会漂浮在 canvas 提供的图层上方。

图 8. 在 canvas 上方对 HTML 元素进行分层
一个大方块,左侧为一个 html 矩形,右侧拐角有两个较小的方形 html 单元。这三个 HTML 单元通过虚线连接到一个 canvas 方块。

点击查看大图

图 8. 在 canvas 上方对 HTML 元素进行分层

一个大方块,左侧为一个 html 矩形,右侧拐角有两个较小的方形 html 单元。这三个 HTML 单元通过虚线连接到一个 canvas 方块。

每个单独的 UI 组件都可以通过使用 CSS 进行排列,从而显示在 canvas 上方前景中的特定位置。

清单 8 通过一个例子展示了如何通过设置一个高 z 索引在 <div> 元素内放置 UI 组件。

清单 8. 将 HTML 组件作为前景元素的 CSS
div.user-interface {
    position: absolute;
    z-index: 100;
    top: 50px;
    left: 50px;
}

由于基于 HTML 的 UI 组件位于最上层,它们默认将响应用户输入。例如,如果某个元素包含一个 UI 元素,如复选框、滚动条或超链接,那么用户单击鼠标的操作将被这些元素捕捉到。通常,单击这些元素的其中一个不会转移到下面的 canvas 层。然而,在某些情况下,可能需要将用户输入放到 canvas 中。

通过合理地设置 pointer-events CSS 属性,可以配置特定的 HTML 元素来忽略用户输入,如清单 9 所示。将 pointer-events 设置为 none 会使元素忽略所有通常与用户输入有关的行为,<div> 中的所有文本、超链接和表单元素都将变得无法选择,实际上就是处于不可用状态。

清单 9. 设置 pointer-events 属性的 CSS
div.user-interface {
    position: absolute;
    z-index: 100;
    top: 50px;
    left: 50px;
    pointer-events:none;
}

输入事件将转移到下一层,其中 <canvas> 元素可以捕获到该事件。例如,<canvas> 元素中可能包含一个事件侦听器,可以捕捉鼠标移动事件。

除 Internet Explorer 以外的所有浏览器都支持 pointer-event 的属性(可以采用一些变通方法来在 Internet Explorer 中模拟类似的行为)。

使用一个输入表面 (input surface) 在 canvas 上进行分层

另一种捕捉用户输入的方法类似于前面的方法,但是不需要使用 pointer-events:none CSS 属性。在这种方法中,将在 canvas 和 HTML UI 元素之上添加额外的一层,这个层专门用于捕捉用户输入。

这种方法适合那些 HTML 元素仅用于显示目的场景。与 HTML 界面元素之间没有任何互动,因为输入表面会在事件到达底层元素之前全部捕捉它们。图 9 给出了一个示例。

图 9. 使用额外的输入表面在 canvas 上对 HTML 元素分层
背面是一个 canvas 方块,中间有三个 html 方块,最上面有一个 html 方块,所有方块通过虚线连接

您可以通过创建一个使用绝对位置的 <div> 来实现输入表面,使用与 canvas 相同的宽度和高度。将 <div> 保留为空,这将实现一个透明的层,其目的就是捕捉用户输入。

要捕捉用户输入,只需要将所有元素侦听器附加到该 <div>。由于它位于最顶层,所有用户输入都将被该元素而不是底层元素捕获。


后续步骤

本系列第 2 部分将进一步展开本文谈到的概念,并通过一个例子展示如何实现一个混合的 canvas/HTML 应用程序。您将逐步了解如何在 canvas 游戏的顶部添加一个基本的 HTML UI,以及如何在 canvas 中创建一个 UI 元素。第 2 部分还将讨论实现动画和文本呈现需要考虑的问题,并解释如何利用 HTML 和 canvas 的优点。

图 10 演示了第 2 部分中的样例游戏概念。

图 10. 结合了 HTML 和 Canvas 元素的样例应用程序
顶部包含两个方框和一个玩家照片的屏幕。

结束语

在本文中,您了解了 HTML 模型与 canvas API 相比的优缺点,构建混合 canvas/HTML 应用程序的理由,以及各种对 HTML 和 canvas 元素分层的方法。

接下来,您应当考虑如何选择一种架构来最佳地利用 HTML 和 canvas 的长处,敬请期待本系列第 2 部分,您将获得一些新的技能来实现一个太空射击游戏。


下载

描述名字大小
文章源代码canvashtmlpt1sourcecode.zip2KB

参考资料

学习

获得产品和技术

  • jQuery:获得流行的 JavaScript Library,它简化了 HTML 文档传输、事件处理、动画效果和 Ajax 交互,加快了 Web 开发。
  • Modernizr:下载这个开源的 JavaScript 库,它可以帮助您构建下一代由 HTML5 和 CSS3 驱动的网站。
  • IBM 产品评估版:下载或 在线试用 IBM SOA 沙盒,并开始使用来自 DB2、Lotus、Rational、Tivoli 和 WebSphere 的应用程序开发工具和中间件产品。

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development, Open source
ArticleID=856505
ArticleTitle=使用 HTML 标记来补充 canvas,第 1 部分 : 混合使用 canvas API 和 HTML/CSS 模型
publish-date=02052013