如此一来，我们就可以通过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绘制基本图形。

转载请注明：Rockyxia Web技术博客 » Canvas学习1：Canvas入门准备
感谢阅读，如果您发现文章中有表述不准确，欢迎提出来，也欢迎交流相关问题，你可以去这里进行一对一问答交流。

（本篇完）

继续浏览有关