如此一来，我们就可以通过HTML5 Canvas中的一些API进行一些操作。比如下面的代码，可以在Canvas中绘制一个矩形：

function canvasApp () { var myCanvas = document.getElementById('myCanvas'); if (!canvasSupport(myCanvas)) { return; } var ctx = myCanvas.getContext('2d'); ctx.fillStyle = '#f36'; ctx.fillRect(10, 10, 200, 200); }

看到的效果如下：

你可能好奇 fillStyle 和 fillRect() 是什么意思，这里你不用搞清楚他们是做什么的，你只要完全的相信，这样做就可以绘一个填充好的矩形。后面的教程，我们会搞清楚是什么意思。

为Canvas封装JavaScript代码

Canvas应用程序与在浏览器中运行的其他应用有所不同。由于Canvas只在屏幕上特定的区域执行并显示效果。可以说它的功能是独占的，因此不太会受到页面上其他内容的影响，反之也是如此。如果想在同一个页面上放置多个 canvas ，那么在定义JavaScript代码时必须将对应的代码分开。

为了避免出现这个问题，可以将变量和函数都封装在另一个函数中。比如前面代码中的 canvasAPP() 函数包含整个Canvas应用程序。另外还可以封装一个 drawScreen() 函数，用来对Canvas应用进行操作。

window.addEventListener('load', eventWindowLoaded, false); function eventWindowLoaded () { canvasApp(); } function canvasSupport (e) { return !!e.getContext; } function canvasApp () { var myCanvas = document.getElementById('myCanvas'); if (!canvasSupport(myCanvas)) { return; } var ctx = myCanvas.getContext('2d'); function drawScreen () { // ... } drawScreen(); }

这样我们就对Canvas进行封装了，如果要实现上面的效果，绘制一个矩形，只需要在 drawScreen() 函数进行操作。

function drawScreen () { ctx.fillStyle = '#f36'; ctx.fillRect(0,0,200,200); } 总结

这篇文章我们了解了如何在HTML页面中添加 canvas 元素，以及怎么检测浏览器是否支持 canvas 。为了更好的使用 canvas ，我们通过JavaScript对 canvas 进行了封装。这样一来，以后我们要在一个 canvas 画布上做任何操作，都可以在封装好的 drawScreen() 函数中操作。这样就能支持 canvas 的浏览器看到效果。有了这些准备工作之后，后面我们就可以做Canvas能做的事情了。在后面的内容我们将会先来了解怎么使用Canvas的API绘制基本图形。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。