什么是Canvas《HTML5系列教程16》

什么是Canvas 《HTML5系列教程16》

什么是canvas，canvas顾名思义是一块画布，也是HTML5中新增加的一个元素，它能够在网页直接绘制多种路径、圆形、弧形、矩形和字符，还能够添加图像，并对添加的图像进行平铺和裁剪处理，甚至可以反转图像的颜色。不过它本身只是一个容器，图形和图像的实现都得依靠JavaScript。在这时候JavaScript就如同一支画笔。接下来我们通过两个示例来简单了解一下什么是canvas吧！

1.如何在HTML5页面中添加canvas元素

“光说不练，是个笨蛋！”说得再多，不如动手做一做，只有频繁的敲代码，让知识在敲敲打打的过程中自然而然地刻录在脑海里，而不是靠单纯的阅读和记忆。接下来我们打开HTML编辑器，将以下代码敲入吧，这些代码将在HTML5页面中添加canvas元素。我们以Dreamweaver CC为例，首先新建一个HTML5文档。

如何在HTML5页面中添加canvas元素

上图的代码中，id="myCanvas"为Canvas元素指定了一个id，便于在将来的JavaScript代码中引用。我们知道id属性是HTML的全局属性，用于规定元素的唯一标识。

在Dreamweaver CC 中的完整代码和预览图效果如下图所示，从代码中我们可以看到以上代码都被添加到了＜body＞＜/body＞标签之间。

如何在HTML5页面中添加canvas元素

保存一下文件，然后我们在谷歌浏览器中预览一下效果。是不是什么也看不到，这是因为canvas只有宽和高两个属性，我们将在接下来的一个示例中绘制一个矩形，这样就能很直观的看到它的作用了。

2.绘制一个蓝色的矩形

绘制蓝色矩形的代码如下图所示：

绘制蓝色矩形的代码

绘制一个蓝色的矩形

相信到这里大家应该大概了解到什么是Canvas了。在下一篇文章中，将为大家介绍如何用canvas绘制一些简单的线条。谢谢大家的观看。祝大家：身体健康、生活愉快。