CanvasTexture

.Textures. CanvasTexture

画布纹理是一种特殊的纹理,由一个超文本标记语言画布元素作为其来源. 您可以使用该纹理的属性直接绘制到画布元素,使用所有的标准 浏览器中可用的画布操作.任何游戏对象都可以被赋予这种纹理,并且可以用它来渲染. 注意:当在网络纹理下运行时,画布纹理需要重新生成它的基础网络纹理,并将其重新部署到 图形处理器,否则你对这个纹理所做的改变将不可见.为此 完成对画布的更改后,您应该调用 `CANVastTexthre.refresh()`.试着保持 这是最低限度的,尤其是在大尺寸的画布上,否则你可能会因为不断上传而不经意地敲打图形处理器 纹理数据.如果使用画布渲染器,此限制不适用. 它从覆盖整个画布的一个框架开始.您可以添加更多框架,这些框架指定 使用 `add` 方法的画布部分. 如果您需要调整画布的大小,请使用`setSize`方法,以便它准确地更新所有的基础 纹理数据.忘记这样做(即.直接从代码中更改画布大小)可能会导致 图形错误.

Constructor

new CanvasTexture(manager, key, source, width, height)

Since:
  • 3.7.0
Parameters:
Name Type Description
manager Phaser.Textures.TextureManager 该纹理所属的纹理管理器的引用.
key string 此纹理的唯一基于字符串的键.
source HTMLCanvasElement 用作此纹理基础的画布元素.
width number 画布的宽度.
height number 画布的高度.

Extends

Members

buffer :ArrayBuffer

Since:
  • 3.13.0
数组缓冲区与上下文图像数据大小相同.
Type:
  • ArrayBuffer

(readonly) canvas :HTMLCanvasElement

Since:
  • 3.7.0
源画布元素.
Type:
  • HTMLCanvasElement

(readonly) context :CanvasRenderingContext2D

Since:
  • 3.7.0
2D画布渲染上下文.
Type:
  • CanvasRenderingContext2D

customData :object

Since:
  • 3.0.0
Inherited From:
在源JSON中设置的任何附加数据(如果有), 或者任何你想存储的关于这个纹理的额外数据
Type:
  • object

data :Uint8ClampedArray

Since:
  • 3.13.0
进入 `buffer` 的into箝位阵列视图. 当画布改变时,使用 `update` 方法来填充它. 请注意,由于其安全限制,这在某些浏览器中不可用,如Epic浏览器.
Type:
  • Uint8ClampedArray

dataSource :array

Since:
  • 3.0.0
Inherited From:
TextureSource数据实例的数组. 用于存储附加数据图像,如法线贴图或镜面贴图.
Type:
  • array

firstFrame :string

Since:
  • 3.0.0
Inherited From:
纹理第一帧的名称.
Type:
  • string

frames :object

Since:
  • 3.0.0
Inherited From:
将唯一的帧键与帧对象相关联的键值对象对.
Type:
  • object

frameTotal :number

Since:
  • 3.0.0
Inherited From:
Default Value:
  • 0
此纹理中的帧总数,包括 `__BASE` 帧. 一个纹理将总是包含至少一个帧,因为默认情况下每个纹理包含一个 `__BASE` 帧, 除了已经添加到它的任何额外的帧之外,例如当解析精灵表或纹理图谱时.
Type:
  • number

(readonly) height :number

Since:
  • 3.7.0
画布的高度. 此属性是只读的,如果您想更改它,请使用 `setSize` 方法.
Type:
  • number

imageData :ImageData

Since:
  • 3.13.0
上下文图像数据. 当画布改变时,使用 `update` 方法来填充它.
Type:
  • ImageData

key :string

Since:
  • 3.0.0
Inherited From:
此纹理的唯一基于字符串的键.
Type:
  • string

manager :Phaser.Textures.TextureManager

Since:
  • 3.0.0
Inherited From:
该纹理所属的纹理管理器的引用.
Type:

pixels :Uint32Array

Since:
  • 3.13.0
`buffer` 的全景.
Type:
  • Uint32Array

source :Array.<Phaser.Textures.TextureSource>

Since:
  • 3.0.0
Inherited From:
TextureSource实例的数组. 这些是这个纹理特有的,包含实际的图像(或画布)数据.
Type:

(readonly) width :number

Since:
  • 3.7.0
画布的宽度. 此属性是只读的,如果您想更改它,请使用 `setSize` 方法.
Type:
  • number

Methods

add(name, sourceIndex, x, y, width, height) → (nullable) {Phaser.Textures.Frame}

Since:
  • 3.0.0
Inherited From:
向此纹理添加新框架. 框架是纹理资源的矩形区域,具有唯一的索引或基于字符串的键. 给定的名称在此纹理中必须是唯一的.如果它已经存在,此方法将返回 `null` .
Parameters:
Name Type Description
name number | string 此框架的名称.该名称在纹理中是唯一的.
sourceIndex number 此框架所属的纹理资源的索引.
x number 此框架左上角的x坐标.
y number 此框架左上角的y坐标.
width number 此框架的宽度.
height number 此框架的高度.
Returns:
添加到此纹理的帧,如果给定的名称已经存在,则为 `null` .
Type
Phaser.Textures.Frame

clear(xopt, yopt, widthopt, heightopt) → {Phaser.Textures.CanvasTexture}

Since:
  • 3.7.0
清除此画布纹理的给定区域,将其重置为透明. 如果没有给定区域,整个画布纹理被清除.
Parameters:
Name Type Attributes Default Description
x number <optional>
0 The x coordinate of the top-left of the region to clear.
y number <optional>
0 The y coordinate of the top-left of the region to clear.
width number <optional>
区域的宽度.
height number <optional>
区域的高度.
Returns:
画布纹理.
Type
Phaser.Textures.CanvasTexture

destroy()

Since:
  • 3.16.0
Overrides:
销毁此纹理并释放对其源和帧的引用.

draw(x, y, source) → {Phaser.Textures.CanvasTexture}

Since:
  • 3.13.0
将给定的图像或画布元素绘制到此画布纹理,然后更新内部 ImageData缓冲区和数组.
Parameters:
Name Type Description
x number 绘制源的x坐标.
y number 绘制源的y坐标.
source HTMLImageElement | HTMLCanvasElement 要绘制到此画布的元素.
Returns:
这可以是文本.
Type
Phaser.Textures.CanvasTexture

drawFrame(key, frameopt, xopt, yopt) → {Phaser.Textures.CanvasTexture}

Since:
  • 3.16.0
将给定的纹理框架绘制到这个画布纹理,然后更新内部 ImageData缓冲区和数组.
Parameters:
Name Type Attributes Default Description
key string 纹理的唯一基于字符串的键.
frame string | number <optional>
要从纹理获取的帧的基于字符串的名称或基于整数的索引.
x number <optional>
0 绘制源的x坐标.
y number <optional>
0 绘制源的y坐标.
Returns:
这可以是文本.
Type
Phaser.Textures.CanvasTexture

get(nameopt) → {Phaser.Textures.Frame}

Since:
  • 3.0.0
Inherited From:
基于帧的关键点或索引从该纹理获取帧. 在纹理图谱中,帧通常由一个关键点引用. 在子画面工作表中,帧由索引引用. 不传递名称值将返回基本纹理.
Parameters:
Name Type Attributes Description
name string | number <optional>
从该纹理获取的帧的基于字符串的名称或基于整数的索引.
Returns:
纹理框架.
Type
Phaser.Textures.Frame

getCanvas() → {HTMLCanvasElement}

Since:
  • 3.7.0
获取画布元素.
Returns:
这个纹理使用的画布元素.
Type
HTMLCanvasElement

getContext() → {CanvasRenderingContext2D}

Since:
  • 3.7.0
获取2D画布渲染上下文.
Returns:
该纹理使用的画布渲染上下文.
Type
CanvasRenderingContext2D

getData(x, y, width, height) → {ImageData}

Since:
  • 3.16.0
从指定的位置和大小获取图像数据区域. 您可以使用 `CanvasTexture.putData` 写回或操作它.
Parameters:
Name Type Description
x number 从中获取图像数据的区域左上角的x坐标.必须在这个CanvasTexture的维度内,并且是一个整数.
y number 从中获取图像数据的区域左上角的y坐标.必须在这个CanvasTexture的维度内,并且是一个整数.
width number 将从中提取图像数据的矩形的宽度.正值在右边,负值在左边.
height number 将从中提取图像数据的矩形的高度.正值向下,负值向上.
Returns:
从这个CanvasTexture中提取的图像数据.
Type
ImageData

getDataSourceImage(nameopt) → {HTMLImageElement|HTMLCanvasElement}

Since:
  • 3.7.0
Inherited From:
给定一个框架名称,返回用于渲染的数据源图像. 例如,您可以使用它来获取图像的法线贴图. 这将返回实际的DOM图像.
Parameters:
Name Type Attributes Description
name string | number <optional>
从该纹理获取的帧的基于字符串的名称或基于整数的索引.
Returns:
DOM图像或画布元素.
Type
HTMLImageElement | HTMLCanvasElement

getFrameNames(includeBaseopt) → {Array.<string>}

Since:
  • 3.0.0
Inherited From:
返回一个包含该纹理中所有帧名称的数组. 如果你想随机分配一个框架给一个游戏对象,这很有用 从返回的数组中选择一个随机元素.
Parameters:
Name Type Attributes Default Description
includeBase boolean <optional>
false 在输出数组中包含 `__BASE` Frame?
Returns:
该纹理中所有框架名称的数组.
Type
Array.<string>

getFramesFromTextureSource(sourceIndex, includeBaseopt) → {Array.<Phaser.Textures.Frame>}

Since:
  • 3.0.0
Inherited From:
返回给定纹理资源中所有帧的数组.
Parameters:
Name Type Attributes Default Description
sourceIndex number 从中获取框架的纹理资源的索引.
includeBase boolean <optional>
false 在输出数组中包含 `__BASE` Frame?
Returns:
纹理框架的数组.
Type
Array.<Phaser.Textures.Frame>

getIndex(x, y) → {number}

Since:
  • 3.16.0
返回此画布纹理中给定像素的图像数据索引. 该索引可用于直接从 `this.data` 数组中读取. 索引指向数组中的红色值.随后的3个指数 分别指向绿色,蓝色和alpha.
Parameters:
Name Type Description
x number 要获取的像素的x坐标.必须在这个CanvasTexture的维度内,并且是一个整数.
y number 要获取的像素的y坐标.必须在这个CanvasTexture的维度内,并