HTML5 Canvas

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对象来跟踪评论频率