HTML5 Canvas: 获取二维上下文，开始绘图

原文：

http://www.lifelaf.com/blog/?p=346

本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 1, “Retrieving the 2D Context, The drawScreen() Function”.

在保证浏览器对Canvas的支持之后，我们需要拿到Canvas的二维上下文(context)，以进行一系列的操作。在HTML5的设计中，Canvas兼容多种上下文（包括三维上下文），但在本文中，我们仅考虑二维上下文。

是时候写一些真正的Canvas代码了。Canvas的上下文(context)指代了HTML页面上相应的用于绘图的对象，因此，对于Canvas的所有操作都是通过上下文(context)来进行的。

接下来，我们要创建一个叫做drawScreen()的函数来进行绘图。这里的”screen”指的不是浏览器窗口，只是Canvas中绘图区域的意思。取名叫”screen”，主要是因为在用Canvas编写的游戏或者应用中，Canvas所起到的作用与“窗口”、“屏幕”并无二致。

首先我们需要做的事情是清空用于绘图的区域。下面的两行代码绘制了一个黄色的、大小和canvas一样的矩形。fillStyle设定了颜色，而fillRect()则创建矩形并把它添加到Canvas中：

context.fillStyle = "#ffffaa";
context.fillRext(0, 0, 500, 300);

其次，让我们看一下要在屏幕上显示文本“Hello World!”，需要写一些什么代码。

1. 第一步，与设定矩形的颜色一样，我们设定文本的颜色：

   context.fillStyle = "#000000";

2. 第二步，我们设定字体的大小和粗细：

   context.font = "20px_sans";

3. 然后，我们调整文字在行中的垂直位置：

   context.textBaseline = "top";

4. 最后，我们调用context对象的fillText()方法，将我们的测试文本打印到屏幕上。fillText()方法的三个参数为：文本字符串、x坐标与y坐标：

   context.fillText("Hello World!", 195, 80);

在屏幕上添加文本后，让我们再添加一些图片吧 — 加载图片文件，并显示在页面上。为了在Canvas中显示图片，我们需要创建一个Image()对象的实例，并将其src属性设置为待加载的图片文件的文件名。

在显示图片之前，我们必须等待图片文件加载完成。因此，需要创建一个回调函数，同时通过设置Image对象的onload属性来监听图片的加载事件 — 一旦onload事件被触发，该回调函数当即执行。在该回调函数中，我们可以调用context.drawImage()语句，传入三个参数（Image对象，x坐标，y坐标）来把图片显示在Canvas上：

var helloWorldImage = new Image();
helloWorldImage.src = "helloWorld.gif";
helloWorldImage.onload = function() {
    context.drawImage(helloWorldImage, 160, 130);
}

最后，我们在文本和图片之外画一个矩形边框。对于画边框而言，可以用context.strokeStyle设定边框的颜色，然后调用context.strokeRect()方法来进行绘制。strokeRect()方法接受4个参数，分别是矩形边框左上角那个点的x、y坐标，以及右下角那个点的x、y坐标：

context.strokeStyle = "#000000";
context.strokeRect(5, 5, 490, 290);

最终效果如下：