HTML5 Canvas
Apple最初创建了Canvas元素,它不仅用于它的Safari浏览器,而且也用在Mac OS X Dashboard中。它最终被WhatWG组织收录,并且还纳入到了将来的HTML 5.0(HTML的下一个版本)的实现中,基于Gecko 的浏览器都支持它,例如Firefox、(当然还包括)Safari,以及Opera。IE是不提供支持的,但是也正尝试着提供一些跨浏览器对象(Google目前就有这样的一个项目)。
和SVG不同,SVG是一个正式的XML词汇,而canvas元素仅是一个元素而已。在大多数情况下,你可以通过DOM访问canvas元素的上下文,并使用它来建立一些复杂的效果。然而,和SVG不同,你需要使用JavaScript来建立这些效果。
提示:要使用Canvas对象,Mozilla在http://developer.mozilla. org/en/docs/Canvas_tutorial上面提供了一个很好的指南。而Apple也在http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html上面提供了相应的指导。
Canvas对象非常容易使用。要开始使用它,你所要做的就是为Web页面添加一个canvas元素:
<canvas id="graph" width="100%" height="300"></canvas>
要建立图形,你可以使用该对象特有的DOM方法getContext,来访问Canvas上下文,当然,首先需要进行测试,以确保浏览器支持该对象:
var canvas = aaElem('graph');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
...
}
一旦拥有了canvas对象,你就可以执行一些绘图操作:建立图形、绘制路径、画圆弧、操纵图片(已加入到XHTML页面的Canvas对象中)、建立二次方曲线,等等。只要建立了这些对象,就和SVG一样,你可以添加一些效果,例如:颜色、填充、透明,甚至建立图章图案。你还可以建立梯度,以及非常独特的线条衔接转角。
由于有SVG,你可以通过Ajax管理这些canvas效果。还是让我们回到这个分页示例中,我们可以将页面中使用的svg元素替换为canvas元素:
<canvas id="graph" width="1000" height="150"></canvas>
在这些代码的新版本中,在添加表格行的同时,这个应用程序还返回了评论数,并且使用这个数值,通过Canvas的moveTo和lineTo方法,在页面的底部绘制出一条评论频率线。随着数据的翻页,这条线也会跟着延伸,直到最终填充整个页面底部。示例8-11显示了它的JavaScript代码。
示例8-11:使用Canvas绘制评论频率线
var startx = 20;
var starty = 150;
var cache = {
offset : 80,
fetch : 40
};
aaManageEvent(window,"load", function() {
var slider = YAHOO.widget.Slider.getVertSlider("sliderbg",
"sliderthumb", 0, 400);
slider.setValue(0,true);
slider.subscribe("change",adjustPage);
createTable();
getRows(0);
aaElem('inner').style.position='relative';
});
// 根据偏移量调整表格容器
// 取决于数据库缓存是否
// 需要增加
function adjustPage(offset) {
var inner = aaElem('inner');
var newTop = -offset;
inner.style.top = newTop + "px";
// 如果偏移量大于
// 缓存偏移量,获取数据行,更新缓存
if (offset > cache.offset) {
getRows(cache.fetch);
cache.offset+=80;
cache.fetch+=40;
}
}
// 建立并附加表格单元格
function createTableCell(value,tr) {
// 建立一个<td>元素
var cell = document.createElement("td");
// 建立一个文本节点
var text = document.createTextNode(value);
// 将我们所建立的文本节点附加到单元格<td>中>
cell.appendChild(text);
// 将单元格<td>附加到行<tr>中
tr.appendChild(cell);
return tr;
}
// 建立空表格并添加到页面
// 设置容器的顶部位置
function createTable() {
var inner = aaElem('inner');
var table = document.createElement('table');
table.id = 'dataTable';
var tableBody = document.createElement("tbody");
tableBody.id = "dataTableBody";
table.appendChild(tableBody);
inner.appendChild(table);
inner.style.top = "0px";
}
// 作为表格行附加最新获取的数据行
function printRows(rowsObj) {
// 清除旧内容
var tableBody = aaElem('dataTableBody');
// 表格行
for(var i = 0; i < rowsObj.length; i++) {
// 建立<tr>元素
var row = document.createElement("tr");
row = createTableCell(rowsObj[i].id, row);
// 锚点和标题
var cell = document.createElement("td");
cell.innerHTML = "<a href='" + rowsObj[i].guid + "'>" + rowsObj[i].title + "</a>";
row.appendChild(cell);
row = createTableCell(rowsObj[i].comments,row);
tableBody.appendChild(row);
}
var canvas = aaElem('graph');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
for (var j = 0; j < rowsObj.length; j++) {
ctx.moveTo(startx,starty);
startx+=5;
starty = 150 - (parseInt(rowsObj[j].comments) * 5);
ctx.lineTo(startx, starty);
}
ctx.stroke();
}
}
代码中所修改的部分已经高亮显示,它演示了使用canvas对象是多么简单。图8-5显示了这个示例在Safari中运行时的截屏,这个浏览器尽管还不支持SVG,但它却支持Canvas。
这里顶多算是一个快速入门。要学习所有Canvas的特性,Mozilla的指南会是一个非常优秀的入门材料。
![]() |
图8-5:使用Canvas对象来跟踪评论频率 |