使用HTML标记来补充canvas(一)混合使用canvas API和HTML/CSS 模型 - 面向对象网,web开发,html,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Html > 正文

使用HTML标记来补充canvas(一)混合使用canvas API和HTML/CSS 模型

来源: www.bianceng.cn 阅读:

简介

本系列文章共两部分,在第 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. 样式 文本

\

由于文本包含一个统一的样式规则(红色、斜体和宋体字),您使用 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);

Tags:
相关文章列表: