原文地址：http://select.yeeyan.org/view/213582/206110

使用HTML5来编写代码的人，有着设计者和开发者双重身份的强悍组合，其职责是构造出高效的富互联网应用（rich Internet application，RIA），特别是丰富的用户界面。就高效这个字眼来说，我的意思是指系统级的和系统性的创造力增强，这种增强以数字化的方式促进了站点所有者、所有者的代理机构和站点用户之间的对话。

RIA是用户获得满意体验的来源之处和媒介，因此，它是任何成功的以网络为中心的风险投资的重要组成部分。以网络为中心的活动，就性质来说，或多 或少都是协作式的。公司要在包括了市场营销和管理的各个层面都取得成功的话，数字化协作的制胜方法是至关重要的。很多时候的很多情况都取决于效率，网站要 依靠效率来满足其访问者的品质期望。

正如你已经见到的那样，HTML5是为这一具有跨平台能力、融合了通信、使用统一语言、提供无处不在的计算，以及基于开放系统的协作式“一网化世 界（one web world）”量身定做的。这一文章系列的前面三部分内容重点关注语义、正确的编码方法、输入在极为重要的转化过程中的作用，以及站点管理最佳做法等，所 有这些的目的都是在为以一种有组织和符合逻辑的方式来创建RIA奠定基础。每篇文章中都共有的一个主题是，对于实现网站所有者的机构目标来说，制造并管理 丰富的用户体验是至关重要的。

什么是Canvas?

HTML5 Canvas（画布）是一个非常有用的绘图和动画元素，Canvas使用JavaScript来直接在页面上绘制图形。这是一个由你来定义和控制的长方形区域，该区域允许动态、可脚本渲染的2D图形和位图图像。

在制作用来增强UI、示意图、相册、图表、图形、动画和嵌入式绘图应用的那些非常棒的视觉材料方面，HTML5堪称完美。Canvas元素有一些用来绘制路径、矩形、圆形和字符的方法。

Canvas的坐标

在画布上绘图的一个先决条件是要熟悉网格或是坐标空间，宽度和高度的空间区域测量是以像素为单位给出的。画布是基于x和y坐标的使用来构建的，画布的x=0, y=0坐标位于左上角。

画布的矩形区域的默认属性是300像素的宽度和150像素的高度，但你可以通过指定宽度和高度来确定画布元素的确切大小。图1中的示意图说明了x和y坐标的实现方式。

图1. Canvas的坐标

图1给出了一个100像素X100像素的画布区：

1. 左上角是x=0，y=0。

2. x的值水平增加，y的值垂直增加。

3. 右下角是x=100，y=100。

4. 中间的点是x=50，y=50。

开始第一步

要在画布上放置任何东西的话，你首先必须在HTML文件中定义画布。你必须创建访问< canvas>标签的JavaScript代码，并通过与HTML5 Canvas API通信来绘制你的图像。

< canvas>标签的基本结构如下：

< canvas id="myCanvas" width="200" height="200">< /canvas>

canvas元素自身有两个属性：width和height，除此之外，canvas还拥有所有主要的HTML5属性，比如说class、id和 name等。id属性被用在上面所示的代码中，JavaScript使用这里创建的canvas的id来表示要在上面绘画的画布。JavaScript使 用document.getElementById()方法来确定正确的画布，如下面代码所示：

var canvas = document.getElementById("myCanvas");

每个画布都必须要有一个context（上下文）的定义，如下面代码所示。就目前的情况来说，官方规范只承认一个2D环境：

var context = canvas.getContext("2d");

在标识画布并指明了它的上下文之后，你就做好了开始绘画的准备了。