Canvas学习：Canvas入门准备_H5之家 - 中国HTML5教程资源分享第一站

由于工作的需要，最近开始在学习HTML5的 canvas 相关的知识。这里主要记录自己学习 canvas 相关的知识笔记。如果文章有不对之处，还请大婶们多多指正。

今天这篇文章是学习 canvas 的一些准备工作。

canvas元素

<canvas> 也是HTML中的一个元素，可以给这个元素添加一些HTML属性，比如使用 width 和 height 来控制其大小，也可以通过 style 给它设置一些基本样式。同样也可以它添加 id 名，在JavaScript中能更好的操作它。

在Web页面中添加一个 canvas 很容易，只需要在 <body> 标签内添加一个 <canvas> 标签就行，如下:

<canvas id="myCanvas" width="400" height="400"> Your browser does not support HTML5 Canvas. </canvas>

上面的示例中，在 </canvas> 中添加一行文本，主要是用于不支持 canvas 的浏览器，如果浏览器不支持，就会显示这行文本。

上面这种方法是比较简单的方法，当然也可以通过JavaScript的 document.createElement('canvas') 创建一个 <canvas> ，并且使用 document.body.appendChild(canvas) 把创建的 canvas 插入到 body 中：

(function(){ var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.id = 'myCanvas'; canvas.width = 400; canvas.height= 400; })();

上面的JS代码就是创建了一个 400 x 400 的 canvas ，并且其 id 名为 myCanvas 。这个时候，你在浏览器中就有一个 canvas ，不过你现在什么都看不到，因为我们还没有在 canvas 中绘制作任何的东西：

如果我们 canvas 添加一个边框，那就可以看到了，只不过里面没有其他的东东而以：

canvas { border: 1px solid #ccc; }

如果你想把 canvas 添加到另一个元素中，比如说 div 中，可以这样操作：

document.getElementById('eleIdName').appendChild(canvas); 文档对象模型（DOM）

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。文档对象模型代表了在HTML页面上的所有对象。它是语言中产且平台中立的。它允许页面的内容和样式被Web浏览器渲染之后再次更新。用户可以通过JavaScript访问DOM 。

在开始使用 <canvas> 之前，需要了解两个特定的DOM对象： window 和 document 。

window 对象是DOM的最高一级，需要对这个对象进行检测来确保开始使用 canvas 应用程序之前，已经加载了所有的资源和代码

document 对象包含所有在HTML页面上的HTML元素。需要对这个对象进行检索来找出用JavaScript操作 <canvas> 的实例

也就是说，将 <canvas> 放入Web页面时，第一件要做的事就是，看看整个页面是否已经加载，并且开始操作前是否所有HTML元素都已展现。这也是在使用Canvas处理图像和声音时非常重要的一点。

为此，做到这一点，我们可以通过监听 window 的 load 事件。该事件在HTML页面加载结束时发生。要监听一个事件，就需要给事件添加一个监听器。在这里，可以通过 addEventListener() 方法来监听 window 的 load 事件。

window.addEventListener('load', function(){},false)

或者

window.addEventListener('load', eventWindowLoaded, false); function eventWindowLoaded () { canvasApp(); //包含整个Canvas应用程序 } 引用Canvas元素

通过前面的内容可以知道，我们可以有两种方法给Web页面添加 <canvas> 元素。虽然在Web页面中有了 <canvas> 元素，但如果我们不通过JavaScript做任何操作的话，你页面中是看不到任何效果的。那么要给一个 canvas 进行操作就是需要一个Canvas对象的引用。在这里的话，可以在 canvasAPP() 函数中先定义一个新变量，比如说这个变量叫 myCanvas ，主要用这个变量来保存Canvas对象的引用。

function canvasApp () { var myCanvas = document.getElementById('myCanvas'); } 检测浏览器是否支持Canvas

canvas 是HTML5的一个API，有部分浏览器是不支持的（）。这也就有前面所说的，在 <canvas> 元素中添加一段描述文本，让不支持的浏览器能看到这段提示性的文本。那么我们在使用Canvas的API之前，可以先做一个浏览器检测。比如：

function canvasAPP () { var myCanvas = document.getElementById('myCanvas'); if (!myCanvas || !myCanvas.getContext) { return; } // 这里开始绘制 }

上面是通过调用Canvas的 getContext() 方法来检测浏览器是否支持 canvas 。其原理很简单，在调用Canvas的 getContext() 方法之前，先检测Canvas对象以及 getContext 方法是否存在。

这段代码其实测试了两件事：

它测试了 myCanvas 是否包含 false (如果命名的 id 不存在， document.getElementById() 将会返回此值)

它测试Canvas的 getContext() 方法是否存在，

如果两者之间有一个测试失败，就会执行 return 语句将中断整个程序的执行。

为了更好的提高代码阅读能力，可以将上面的代码进行一个封装。

在使用Canvas的相关API，除了要获取 canvas 对象之外，还需要得 2D 环境的引用，才能够操作它。HTML5的Canvas被设计可以与多个环境工作，包括一个建议的 3D 环境。不过我们先学的是 2D 环境。

要获取Canvas中的 2D 环境，只需要通过 canvas 的 getContext() 方法即可，给这个方法传入一个 2d 的值。并且将这个环境赋予给一个变量，比如 ctx ：

function canvasApp () { var myCanvas = document.getElementById('myCanvas'); if (!canvasSupport(myCanvas)) { return; } var ctx = myCanvas.getContext('2d'); // ... }