在绘画工具包中最重要的一个工具是画布（canvas）。在一个几乎无限的变化和组合之中，它给予开发者许多自由空间去表达各种的感情，效果，概念等等。这个自由的空间只可能被两件事所限制——他们的技术层次和想象力。

这种情况和在网页开发的世界有异曲同工之妙。随着HTML5的不断进步以及其强大的规模，网页开发者已经能够做出过去做不到的事情了。因为有一项叫做 HTML5 Canvas 技术的诞生，直接在浏览器上画图以及创建动画已经是完全有可能的了。

什么是 HTML5 Canvas?

canvas元素是一个在HTML代码中使用 width 和 height 属性定义的元素。然而，canvas元素真正地力量归功于 HTML5 Canvas API。这组API通过 JavaScript 代码来访问全套绘画函数，因此允许动态生成画面。

HTML5 Canvas 强大在哪里?

这里有些原因，你可能会想学习使用 HTML5 canvas 的特性：

你可以用 HTML5 Canvas 创建什么样的应用

canvas很赞。但是你究竟能用他做什么呢？让我们来瞅瞅。

现在知道为什么你需要学canvas了吧，让我们看看 HTML5 Canvas 的基础然后学习如何开始使用它。

Canvas 渲染内容

每个 HTML5 canvas 元素都要有个 context 。context 定义了你将使用的 HTML5 Canvas API。2d context是用于绘制2D图形和处理位图图像。3d context是用于三维图形的创建和操作。后者实际上被称为 WebGL ，是建立在 OpenGL ES 基础之上的。

开始

开始使用canvas，你所需要的就是一个代码编辑器和支持HTML5 canvas的浏览器。我使用的是SUblime和Chrome，你可以使用你想用的。

我们的HTML看上去是这个样的：

<canvas> <!-- OPTION 1: leave a message here if browser doesn't support canvas --> <p>Your browser doesn’t currently support HTML5 Canvas. Please check caniuse.com/#feat=canvas for information on browser support for canvas.</p> <!-- OPTION 2: put fallback content (text, image, Flash, etc.) if the browser doesn't support canvas --> </canvas>

这里是我们的 JavaScript，我们可以将此放在HTML页面的底部：

var canvas = document.getElementById('exampleCanvas'), context = canvas.getContext('2d'); // code examples will continue here...

默认情况下，即使在html中没有定义大小，浏览器默认创建一个宽300像素和高150像素的canvas元素。你可以通过定义 width 和 height 改变canvas尺寸，就像我在HTML中做的一样。

注意，我们赋予了canvas id 的属性，我们将在JavaScript中用到。最后，如果你希望，你可以给canvas添加边框，使之通过一个框架可见。这不是必要的，只是用于帮我们看到canvas元素的边界。

注意在 <canvas> 标签开闭和之间，我添加一段内容，如果浏览器不支持canvas，则显示这段内容。这可以是任何类型的内容，只要老浏览器支持。

JavaScript从两行开始。在第一行，我创建了一个变量通过canvas元素的ID缓存它。第二行创建一个变量（ context ），用 getContext() 函数引用canvas的2D context。我们会用 context 变量来获得canvas的所有绘画函数和属性。

准备好了canvas，我们开始试验canvas API吧！但是在那之前，让我们来理清canvas的一些特性吧。

HTML5 Canvas 尺寸 vs. 绘图尺寸

除了 canvas 元素的 width 和 height 属性，你同样也可以用CSS来定义canvas元素的大小。然而通过SS改变一个canvas元素的大小和直接设置元素的 width 和 height 的属性是不一样的。这是因为一个canvas实际上有两个尺寸：元素本身的大小和元素绘图面积的大小。

当你设置元素的 width 和 height 属性，你同时设置了元素的尺寸和元素绘图面积的尺寸；然而，当你使用CSS来设置一个canvas元素的大小的时候，你仅仅设置了元素的尺寸，而不是绘图面积的尺寸。当canvas元素的尺寸和绘图面积的尺寸不一样的时候，浏览器会缩放绘图面积来符合元素的尺寸。

正是这个原因，需要使用元素的 width 和 height 属性来设置元素尺寸，而不是用CSS。

理解 Canvas 坐标系统

在二维空间，位置是通过X和Y轴坐标来引用的。X轴为水平延伸，Y轴为垂直延伸。中心的位置是 x = 0 和 y = 0 ，这也可以被表示为 (0, 0) 。定位对象的方法，在数学中被定义为 笛卡儿坐标系统 。

canvas的坐标系统，然而，将原点放在画布的左上角，X轴向右增加，Y轴向下增加。因此和传统的笛卡尔坐标空间不一样，canvas空间没有可见的负值坐标点。使用负值坐标不会导致程序出错，但是使用负值坐标的元素不会在页面上显示。

基础 Canvas 例子

如前所述，HTML5 canvas 可以让你创建许多类型的元素，包括线段，曲线，路径，形状，文本等等。在这个例子中，让你看到这些对象是如何绘制的。我不深入canvas api的细节；这些只是一些简单地帮助你了解canvas是如何运行的。

画线段

画一条线段，我们用4个canvas API的方法。我们从 beginPath() 方法开始，这个方法指示浏览器准备开始画一条新路径。然后我们用 moveTo(x, y) 方法来指定线条的开始点。然后 lineTo(x, y) 方法设置线条的结束点，然后画一条线连接两点。

这个时候，线条会被绘制，但是依然是不可见的。为了使之可见，我们使用 stroke() 方法用默认的黑色来显示这条线段。

context.beginPath(); context.moveTo(50, 50); context.lineTo(250, 150); context.stroke();

看来自SitePoint ( @SitePoint )在 CodePen 上的 Canvas线条例子 .

画矩形

画一个矩形，我们用 fillRect(x, y, width, height) 这个方法来设置坐标和尺寸，通过 fillStyle 这个属性来填满颜色。

context.fillStyle = 'yellow'; context.fillRect(50, 50, 200, 100);

看来自SitePoint ( @SitePoint )在 CodePen 上的 Canvas 矩形例子 。

注意矩形是被定位在左上角的。

画文本

为了在canvas上画文本，我们用 fillText(string, x, y) 和 font 属性来设置投字体，大小和文本样式（和CSS中font的简写类似）。

context.font = 'italic 40pt Calibri, sans-serif'; context.fillText('Hello World!', 50, 50);

看来自SitePoint ( @SitePoint )在 CodePen 上的 Canvas文本例子 。