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