用 HTML Canvas 创建一个图片浏览器
颜 林
, 软件工程师, IBM
2009 年 12 月 10 日
HTML
5 引入了新的的网页元素：<canvas>。Canvas 是一片空白的绘图区域，网页开发者可以利用 JavaScript
在该区域中自由地进行 2D 绘图。Canvas 可以用于渲染华丽的网页设计界面。本文通过一个详细的实例来说明如何用 Canvas
来制作一个图片的浏览器。最终的效果可以达到 Flash 程序的效果。通过本文，读者可以了解如何使用 Canvas
的各种函数以及如何与用户事件进行交互，适合读者为 Web 设计和架构师。
HTML Canvas 介绍
HTML5
是目前正在讨论的新一代 HTML 标准，它代表了现在 Web 领域的最新的发展方向。在 HTML5
标准中，加入了新的多样的内容描述标签，直接支持表单验证，视频和音频标签，网页元素的拖拽，离线存储，工作线程等等。当然，其中一个最令人激动的新特性
就是新的标签类型 Canvas，开发人员可以通过该标签，在网页上直接用脚本进行绘图，产生各种 2D 渲染的效果。所以有人预言，HTML5 将是
Flash 和 Silverlight 的“杀手”。从 Firefox 1.5 开始就已经支持 Canvas，Safari 也是很早就开始支持
Canvas。新的浏览器比如 Chrome 也是从一开始就支持。但遗憾的是，到目前为止，IE 一直不支持该标准。
下面内容
将通过如何用 Canvas 来制作一个图片浏览器的具体实例，来说明 Canvas 的各种 API，如何使用这些 API
以及如何应用到工程中去。本文将首先介绍如何创建图片浏览器的网页和 JavaScript 类，介绍整体界面的设计，然后介绍如何用 Canvas
的 API 来绘制 2D 图形，然后介绍如何在 Canvas 上加载和绘制图像，接下来本例会在图片浏览器中加入其他基于 Canvas
的效果，最后是总结和展望。
回页首
创建图片浏览器框架
创建文件
首先我们创建一个新的 html 文件 thumbnail.html，加入如清单 1 所示的内容：
清单 1.thumbnail.html
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas Based Thumbnail</title>
<style type="text/css">
body {
background: black;
color: white;
font: 24pt Baskerville, Times, Times New Roman, serif;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
<script type="text/javascript" src="thumbnail.js"></script>
</head>
相关文档：
\webapps\test 路径下ThreeParams.html:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>TreeParams</title>
</head>
<body>
<form method="get" onsubmit="return true" name="form1" action="/test/tp">
<tabl ......
http://www.w3school.com.cn/htmldom/met_table_deleterow.asp
定义和用法
deleteRow() 方法用于从表格删除指定位置的行。
语法
tableObject.deleteRow(index)
说明
参数 index 指定了要删除的行在表中的位置。行的编码顺序就是他们在文档源代码中出现的顺序。<thead> 和 <tfoot> 中的行与表中其它行一起 ......
如果用webbrowser的document去获取IFrame这个对象，随后一定会得到accessdenied的错误，为什么？
找了一下，据说是不能跨域访问...
终于有一天，试了一下，在OnDocumentComplete事件里面返回的dispatch就是iframe的IHTMLWindow2对象，在那里可以操作所有的对象，然后，你想做什么就随你了，不知道如果这个时候保存了这个I ......
根据剪贴板的原理，在获取剪贴板内容之前，必须指定要获取内容的格式。由于剪贴板中的数据可能存在多种格式，所以有必要对剪贴板的格式类型先做一些了解。W写下了以下的测试代码：
procedure TForm1.Button3Click(Sender: TObject);
var
i: integer;
Buffer: PChar;
s: string;
begin
M ......
PageReleaser需要一种HTML的压缩算法，Google了很久，发现如果只是简单去除空白和注释的话，使用XLinq就可以轻易的实现 先看看MSDN是怎么说的： 一种常用方案是读取缩进的 XML，在内存中创建一个没有任何空白文本节点（即不保留空白）的 XML 树，对该 XML 执行某些操作，然后保存带缩进的 XML。在序列化带格式的 XML � ......
