易截截图软件、单文件、免安装、纯绿色、仅160KB

用 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>


相关文档:

常用正则表达式大全!(例如:匹配中文、匹配html)

     匹配中文字符的正则表达式: [u4e00-u9fa5]  
  评注:匹配中文还真是个头疼的事,有了这个表达式就好办了
  匹配双字节字符(包括汉字在内):[^x00-xff]
  评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)
  匹配空白行的正则表达式:ns* ......

测试在博客中加入html的支持


    for 
(tmp 

m_commentHead

tmp

tmp 

tmp->next)
    {
        nCommentNum ++
;
        
memset(wBuffer,
0
......

javascript Html 导出为word excel

<HTML>
<HEAD>
<title>WEB页面导出为EXCEL文档的方法
</title>
</HEAD>
<body>
<BR>
<table id = "PrintA" width="100%" border="1" cellspacing="0" cellpadding="0" bgcolor = "#61FF13">
<TR style="text-align : center;" mce_style="text-ali ......

html中的div标签的含义和应用

CSS是DHTML的基础,CSS用于设定HTML元素在页面上的显示风格,而CSS-P则是CSS的一个扩展,它可用来控制HTML元素在网页上或者说在窗口的位置。下面的两个链接提供了CSS和CSS-P详尽的技术手册:
   W3C CSS-Positioning
   Builder.com's CSS Guide
   在本课程中,将会反复地对CSS进行介绍。
   使用DIV标签
  ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号