zhangye20851的专栏

<br />网格<br /><br />在真正开始之前，我们需要先探讨 canvas 的网格（grid）或者坐标空间（coordinate space）。在前一页的HTML模板里有一个150像素宽， 150像素高的 canvas 对象。我在画面上叠加上默认网格，如下图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角（坐标(0,0)）。画面里的所有物体的位置都是相对这个原点。这样，左上角的蓝色方块的位置就是距左边x像素和距上边Y像素（坐标(x, y)）。后面的教程中我们将学会如何

<br />Canvas是HTML 5中新增加的一种元素，可以把它想象成一个可以作画的画布，它提供了Javascript API，用这些API可以在上面绘制线条、多边形、圆弧、图片、文字等。和SVG不同，Canvas是基于位图而不是矢量的。<br /><canvas>标记由 Apple 在 Safari 1.3 Web浏览器中引入。对 HTML的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在

<br /><br />今天在浏览cnbeta.com站的时候，看到了《Chrome开始带来WebKit的通知功能》一文。Chrome又一次领先的发布了新技术的API—webkitNotifications。通过查看它给的例子(Desktop Notification Demo)，里面有比较详细的说明，不过看起来还是比较难懂，所以我整理了下，重新编写了例子中的代码，加上注释，算是比较清晰了吧。《具体实例》var Notify = function(){}<br />//判断是否支持webkitNotific

<br />在 绘制图形 的章节里，我只用到默认的线条和填充样式。而在这一章里，我们将会探讨 canvas 全部的可选项，来绘制出更加吸引人的内容。（文/鬼武者）<br /><br />色彩 Colors<br /><br />到目前为止，我们只看到过绘制内容的方法。如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle和 strokeStyle。 fillStyle = color strokeStyle = color复制代码<br />strokeStyle 是用于设置图形轮廓的颜色，而

<br />目录简述canvas 基础2D context API基本线条路径插入图像像素级操作文字阴影颜色渐变小节简述<br />HTML 5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个 canvas 元素都有一个"上下文( context )" (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的 API 提供图形绘制

由于我们是用脚本去操控 canvas 对象，这样要实现一些交互动画也是相当容易的。只不过，canvas 从来都不是专门为动画而设计的（不像 Flash），难免会有些限制。可能最大的限制就是图像一旦绘制出来，它就是一直保持那样了。如果需要移动它，我们不得不对所有东西（包括之前的）进行重绘。重绘是相当费时的，而且性能很依赖于电脑的速度。（文/鬼武者）基本动画的步骤画一帧，你需要以下一些步骤：清空 canvas除非接下来要画的内容会完全充满 canvas （例如背景图），否则你需要清空所有。最简单的做法就是用 c

<br />Canvas 相当有趣的一项功能就是可以引入图像，它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字（标准说明中并没有包含绘制文字的功能）。只要是 Gecko 支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas 中，而且其它的 canvas 元素也可以作为图像的来源。（文/鬼武者）<br /><br />引入图像<br /><br />引入图像只需要简单的两步：<br />第一当然是来源图片，不是简单的 URL 路径，但可以是一个 JavaScript 的 Ima

<br />之前的例子里面，我们总是将一个图形画在另一个之上，大多数情况下，这样是不够的。比如说，它这样受制于图形的绘制顺序。不过，我们可以利用 globalCompositeOperation属性来改变这些做法。（文/鬼武者）<br /><br />globalCompositeOperation<br /><br />我们不仅可以在已有图形后面再画新图形，还可以用来遮盖，清除（比 clearRect 方法强劲得多）某些区域。 globalCompositeOperation = type复制代码<br

<br />状态的保存和恢复<br /><br />在了解变形之前，我先介绍一下两个你一旦开始绘制复杂图形就必不可少的方法。 save() restore()复制代码<br />save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。<br /><br />Canvas 状态是以堆(stack)的方式保存的，每一次调用 save 方法，当前的状态就会被推入堆中保存起来。这种状态包括：<br />      当前应用

<br />由于我们是用脚本去操控 canvas 对象，这样要实现一些交互动画也是相当容易的。只不过，canvas 从来都不是专门为动画而设计的（不像 Flash），难免会有些限制。<br />可能最大的限制就是图像一旦绘制出来，它就是一直保持那样了。如果需要移动它，我们不得不对所有东西（包括之前的）进行重绘。重绘是相当费时的，而且性能很依赖于电脑的速度。（文/鬼武者）<br /><br />基本动画的步骤<br /><br />画一帧，你需要以下一些步骤：<br />清空 canvas<br />除非接下