HTML中的canvas虽然可以绘制文本，但是不能输入文本，那想要输入文本怎么办呢？可以使用其它的DOM元素，不如说input等。
但是如果手写的话，那么当需要将文本框放在画布上层时，就需要自己去调整文本框的定位等属性，而如果通过Phaser提供的API，那么它就会帮我们自动去调整，并且可以使用类似于GameObject中的x、y等属性去设置文本框的位置等东西。

基本配置

为了使用DOM元素，我们需要在Game类中配置以下内容：

{
  parent:一个元素,
  dom:{
    createContainer:true
  }
}

parent属性用来设置画布和DOM元素的父元素，要使用dom元素一定要设置这个属性，这个属性可以是document.body，也可以是div元素等。
接着一定要设置dom属性，其中的createContainer一定要是true。这样，就会在父元素下创建一个容纳其它dom元素的div元素。这个div元素是和画布元素同级的，所有通过Phaser API 创建、添加的其它dom元素都会作为该div元素的子级。

添加dom元素

在场景类中的create()方法中，可以使用如下方式添加dom元素：

this.add.dom(坐标x值,坐标y值,元素,样式,内部文本);

后面三个都是可选参数。
前面两个参数就不多说了，需要注意的是默认情况下这样添加的DOM元素默认也是以，即矩形中心为定位点的，因为dom元素也是GameObject中的一类，因此我们也可以在dom元素上使用setOrigin()方法去设置定位点；
第三个参数，这个元素可以是一个你已经在HTML或者通过DOM API创建的元素，也可以是一个元素的名称（这种情况下将会创建一个新的），例如

this.add.dom(0,0,"input");

将会创建一个新的input元素。
样式也就是CSS，可以是一个字符串，也可以使用JS对象的方式来描述，例如下面两行是一样的意思：

"color:orange"
{color:"orange"}

需要注意的是第一种是按照CSS的方式去编写样式的，而第二种则是按照类似于JS中设置DOM元素的样式的方式去编写样式的，通俗地就是当在第一种方式中需要连词符的属性名在第二种方式中应该改成驼峰命名，例如background-color属性用第二种写法就要写成backgroundColor。
通过dom元素的node属性，我们可以获得实际的DOM元素节点。