canvas js 绘图插件_从零开始说Canvas技术（1）

上回说到游戏最重要、最核心的三个要素就是图像、音乐和交互。在HTML5中，图像一般使用Canvas技术或者WebGL技术，WebGL技术相对于Canvas技术来说能显示更为丰富的画面，但是支持Canvas技术的浏览器比支持WebGL的浏览器稍多，且Canvas技术的代码量较少、容易学习，所以我们从Canvas技术谈起。

I. 开发工具

既然要开发小游戏，首先要准备好开发工具。HTML5应用程序实际上是一个HTML网页，本质上就是一个文本文件，所以我们可以使用任何的文本编辑器来做，记事本也能做，但是由于记事本功能较少，开发效率会很低，所以从实际出发不可能使用记事本来开发HTML5应用程序。有个很好地免费国产软件，叫做HBuilderX，它还能把HTML5应用打包成APP，该系列文章以后也会以此作为开发工具。

当然，为了运行和测试我们的HTML5游戏，浏览器也是必备的工具之一，chrome浏览器是一个不错的选择，当然QQ浏览器也不错。

II. Canvas技术简介

HTML是超文本标记语言，它是由各种各样的标签构成的，用以说明网页上的各种元素如何排序、如何显示，要使用Canvas技术就要使用标签，该标签只是一个容器，要想在其中显示图像，需要使用JavaScript，但它本身并不能绘制图像。

III. 创建项目和HTML文件

我们创建一个空的普通项目，在项目中新建一个HTML文件。之后再右侧编辑栏中会自动打开该文件，上面有很多默认的代码。像这类书名号中有很多字母的东西称为标签。

第一行代表这个文件是HTML5文件从，第二行开始就是主要的代码，所有其它的代码都必须写在标签中，一般在该标签中都会有

标签和标签，前者中一般写关于网页基本信息的代码，后者一般写要显示在网页上的东西的代码。我们的标签就是要写在标签中。

在

标签中，一般会有标签和标签，标签用于设置标题。标签可以用于设置各样的信息，最常用来设置字符集，charset是该标签的一个属性、用于设置字符集，等于号右边的是该属性的值，即意味着将字符集设置为UTF-8，UTF-8是一个支持多数语言文字的字符集，当然为了能够正常显示，需要将文件的字符集也设置为对应的UTF-8编码格式，HBuilderX默认的编码格式就是UTF-8。

IV. 让我们开始

首先，我们在body中添加canvas标签，并让我们为其设置一些属性。最重要的属性是id，其次我们还要设置width和height属性，也就是它的宽和高，后面这两个属性不能加单位，所设置的数值的默认单位为像素(px)，正因为不能加单位，所以使用设置属性的方式并不能让其兼容所有大小的屏幕，如果想要兼容就要使用到CSS了，这个我们以后再说。

所以这一步完成之后的代码类似于这样：

如果浏览器不支持canvas标签，则会显示canvas标签中的内容。

在html文件中使用