上下文绘图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 =newImage();
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);

最终效果如下：

文章结束给大家分享下程序员的一些笑话语录： 开发时间
　　项目经理: 如果我再给你一个人,那可以什么时候可以完工?程序员: 3个月吧!项目经理: 那给两个呢?程序员: 1个月吧!
项目经理: 那100呢?程序员: 1年吧!
项目经理: 那10000呢?程序员: 那我将永远无法完成任务.

--------------------------------- 原创文章 By
上下文和绘图
---------------------------------