本文将对传统 HTML 模型和 canvas API 的优点进行比较，探索一个将两种模型的优点集于一身的混合 HTML/Canvas 应用程序，还将了解一些在 canvas 元素上添加 HTML 元素的不同技巧。
本系列文章共两部分，在第 1 部分中，将创建将 canvas API 和 HTML/CSS 两种模型的优点结合在一起的应用程序。canvas API 是要求高性能、低负荷图形的 Web 应用程序的理想选择。然而，如果仅仅围绕 canvas 设计整个应用程序而忽略传统 HTML/CSS 模型的优点则不免短视。与其想当然，不如学习一些在 HTML/CSS 中非常有用但在 canvas 中难以或无法实现的功能。
本文将采用一种 “混合” 方法来设计应用程序，使之能够同时利用传统的 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. 样式文本
由于文本包含一个统一的样式规则（红色、斜体和宋体字），您使用 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.get">Context('2d');context.font = 'italic 12px Arial';context.fillStyle = 'red';context.fillText('Variety is the spice of life!', 0, 50);
采用动态样式的文本
考虑图 2 中的文本。
图 2. 采用动态样式的文本
清单 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>