canvas入门

　　让我们仅使用单个canvas元素，开始创建我们的HTML5页面。

　　就是这样!现在我们可以看到一个支持Canvas元素的空白页面，出现在支持的浏览器：Chrome、Firefox和Safari。IE 8以及相应的旧版本不支持Canvas。

　　在我们开始利用画布绘画前，我们需要得到绘图上下文。Canvas公开一个或多个绘图上下文，但是我们将专注于最受欢迎的一个——“2 d”上下文。

　　让我们添加一个引用JavaScript文件后直接我们关闭canvas标记:

　　这就是部分的JavaScript文件。

　　在本教程中，我将快速讲解canvas上下文相关的绘画方法，他们是：

元素。fillRect和strokeRect都用于绘图的矩形。唯一的区别是，fillRect是画一个填充色彩的矩形，而strokeRect是画一个空矩形，边框为彩色。fillText用于在画布上放置文本。

　　点击以下链接，浏览演示内容：

　　关于渲染2个矩形，文本和图像的JavaScript源文件，可以在这里找到:

　　这就是测试页面：

　　双缓冲

　　因为我们现在有一个游戏骨架，我们也知道如何利用Canvas绘图。在实现真正的游戏之前，唯一剩下的是双缓冲技术。不过我们不会活灵活现地演示这种技术，因为我们没有闪烁的动画效果。但是，既然这篇文章是你学习Canvas游戏的起点，我寻思着应该向您展示如何利用双缓冲技术在Canvas快速绘画。

　　双缓冲技术背后的想法是减少闪烁：首先基于内存缓冲区绘画，然后将内存中渲染完成的图像，刷入到屏幕上。

　　我们只需要稍微修改我们的Canvas的JavaScript:

　　现在，我们就调用_canvasBufferContext 而非_canvasContext对象绘图了。如下：

　　_canvasContext.drawImage(_canvasBuffer, 0, 0);

　　这样就把Canvas缓冲区的内容输出到屏幕。就这么简单!