在此页

• 特性
• 方法
• 静态方法
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

DOMMatrixReadOnly interface represents a read-only 4×4 matrix, suitable for 2D and 3D operations. The DOMMatrix interrface—which is based upon DOMMatrixReadOnly —adds mutability , allowing you to alter the matrix after creating it. A 4×4 matrix is suitable to describe any rotation and translation in 3D.

This interface should be available inside web workers , though some implementations doesn't allow it yet.

特性

This interface doesn't inherit any properties.

is2D 只读

A Boolean flag whose value is true if the matrix was initialized as a 2D matrix. If false , the matrix is 3D.

isIdentity 只读

A Boolean whose value is true if the matrix is the identity matrix . The identity matrix is one in which every value is 0 except those on the main diagonal from top-left to bottom-right corner (in other words, where the offsets in each direction are equal).

m11 , m12 , m13 , m14 , m21 , m22 , m23 , m24 , m31 , m32 , m33 , m34 , m41 , m42 , m43 , m44

Double-precision floating-point values representing each component of a 4×4 matrix, where m11 透过 m14 are the first column, m21 透过 m24 are the second column, and so forth.

a , b , c , d , e , f

Double-precision floating-point values representing the components of a 4×4 matrix which are required in order to perform 2D rotations and translations. These are aliases for specific components of a 4×4 matrix, as shown below.

2D	3D equivalent
a	m11
b	m12
c	m21
d	m22
e	m41
f	m42

方法

This interface doesn't inherit any methods. None of the following methods alter the original matrix.

DOMMatrixReadOnly.flipX()

返回新的 DOMMatrix created by flipping the source matrix around its X-axis. This is equivalent to multiplying the matrix by DOMMatrix(-1, 0, 0, 1, 0, 0) . The original matrix is not modified.

DOMMatrixReadOnly.flipY()

返回新的 DOMMatrix created by flipping the source matrix around its Y-axis. This is equivalent to multiplying the matrix by DOMMatrix(1, 0, 0, -1, 0, 0) . The original matrix is not modified.

DOMMatrixReadOnly.inverse()

返回新的 DOMMatrix created by inverting the source matrix. If the matrix cannot be inverted, the new matrix's components are all set to NaN 及其 is2D property is set to false . The original matrix is not altered.

DOMMatrixReadOnly.multiply()

返回新的 DOMMatrix created by computing the dot product of the source matrix and the specified matrix: A ⋅ B . If no matrix is specified as the multiplier, the matrix is multiplied by a matrix in which every element is 0 except the bottom-right corner and the element immediately above and to its left: m 33 and m 34 . These have the default value of 1 . The original matrix is not modified.

DOMMatrixReadOnly.rotateAxisAngle()

返回新的 DOMMatrix created by rotating the source matrix by the given angle around the specified vector. The original matrix is not modified.

DOMMatrixReadOnly.rotate()

返回新的 DOMMatrix created by rotating the source matrix around each of its axes by the specified number of degrees. The original matrix is not altered.

DOMMatrixReadOnly.rotateFromVector()

返回新的 DOMMatrix created by rotating the source matrix by the angle between the specified vector and (1, 0) . The original matrix is not modified.

DOMMatrixReadOnly.scale()

返回新的 DOMMatrix created by scaling the source matrix by the amount specified for each axis, centered on the given origin. By default, the X and Z axes are scaled by 1 and the Y axis has no default scaling value. The default origin is (0, 0, 0) . The original matrix is not modified.

DOMMatrixReadOnly.scale3d()

返回新的 DOMMatrix created by scaling the source 3D matrix by the given factor along all its axes, centered on the specified origin point. The default origin is (0, 0, 0) . The original matrix is not modified.

DOMMatrixReadOnly.scaleNonUniform()

返回新的 DOMMatrix created by applying the specified scaling on the X, Y, and Z axes, centered at the given origin. By default, the Y and Z axes' scaling factors are both 1 , but the scaling factor for X must be specified. The default origin is (0, 0, 0) . The original matrix is not changed.

DOMMatrixReadOnly.skewX()

返回新的 DOMMatrix created by applying the specified skew transformation to the source matrix along its X-axis. The original matrix is not modified.

DOMMatrixReadOnly.skewY()

返回新的 DOMMatrix created by applying the specified skew transformation to the source matrix along its Y-axis. The original matrix is not modified.

DOMMatrixReadOnly.toFloat32Array()

返回新的 Float32Array containing all 16 elements ( m11 , m12 , m13 , m14 , m21 , m22 , m23 , m24 , m31 , m32 , m33 , m34 , m41 , m42 , m43 , m44 ) which comprise the matrix. The elements are stored into the array as single-precision floating-point numbers in column-major (colexographical access, or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.)

DOMMatrixReadOnly.toFloat64Array()

返回新的 Float64Array containing all 16 elements ( m11 , m12 , m13 , m14 , m21 , m22 , m23 , m24 , m31 , m32 , m33 , m34 , m41 , m42 , m43 , m44 ) which comprise the matrix. The elements are stored into the array as double-precision floating-point numbers in column-major (colexographical access access or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.)

DOMMatrixReadOnly.toJSON()

Returns a JSON representation of the DOMMatrixReadOnly 对象。

DOMMatrixReadOnly.toString()

创建并返回 DOMString object which contains a string representation of the matrix in CSS matrix syntax, using the appropriate CSS matrix notation. See the matrix() CSS function for details on this syntax.

For a 2D matrix, the elements a 透过 f are listed, for a total of six values and the form matrix( a , b , c , d , e , f ) .

For a 3D matrix, the returned string contains all 16 elements and takes the form matrix3d( m 11 , m 12 , m 13 , m 14 , m 21 , m 22 , m 23 , m 24 , m 31 , m 32 , m 33 , m 34 , m 41 , m 42 , m 43 , m 44 ) . See the CSS matrix3d() function for details on the 3D notation's syntax.

Throws an InvalidStateError exception if any of the elements in the matrix are non-finite (even if, in the case of a 2D matrix, the non-finite values are in elements not used by the 2D matrix representation).

DOMMatrixReadOnly.transformPoint()

Transforms the specified point using the matrix, returning a new DOMPoint object containing the transformed point. Neither the matrix nor the original point are altered.

DOMMatrixReadOnly.translate()

返回新的 DOMMatrix containing a matrix calculated by translating the source matrix using the specified vector. By default, the vector is (0, 0, 0) . The original matrix is not changed.

静态方法

This interface inherits methods from DOMMatrixReadOnly .

fromFloat32Array()

Creates a new mutable DOMMatrix object given an array of single-precision (32-bit) floating-point values. If the array has six values, the result is a 2D matrix; if the array has 16 values, the result is a 3D matrix. Otherwise, a TypeError exception is thrown.

fromFloat64Array()

Creates a new mutable DOMMatrix object given an array of double-precision (64-bit) floating-point values. If the array has six values, the result is a 2D matrix; if the array has 16 values, the result is a 3D matrix. Otherwise, a TypeError exception is thrown.

fromMatrix()

Creates a new mutable DOMMatrix object given an existing matrix or a DOMMatrixInit dictionary which provides the values for its properties. If no matrix is specified, the matrix is initialized with every element set to 0 except the bottom-right corner and the element immediately above and to its left: m 33 and m 34 . These have the default value of 1 .

规范

规范	状态	注释
Geometry Interfaces Module Level 1 The definition of 'DOMMatrixReadOnly' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
DOMMatrixReadOnly	Chrome 61 61 45 Disabled Disabled From version 45: this feature is behind the --enable-blink-features=GeometryInterfaces runtime flag.	Edge 79 79 79 Disabled Disabled From version 79: this feature is behind the --enable-blink-features=GeometryInterfaces runtime flag.	Firefox 33	IE No	Opera 48 48 32 Disabled Disabled From version 32: this feature is behind the --enable-blink-features=GeometryInterfaces runtime flag.	Safari 11	WebView Android 61	Chrome Android 61 61 45 Disabled Disabled From version 45: this feature is behind the --enable-blink-features=GeometryInterfaces runtime flag.	Firefox Android 33	Opera Android 48 48 32 Disabled Disabled From version 32: this feature is behind the --enable-blink-features=GeometryInterfaces runtime flag.	Safari iOS 11	Samsung Internet Android 8.0
DOMMatrixReadOnly() 构造函数	Chrome 57	Edge 79	Firefox 33	IE No	Opera 44	Safari 11	WebView Android 61	Chrome Android 57	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
a	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
b	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
c	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
d	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
e	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
f	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
flipX()	Chrome 54	Edge 79	Firefox 33	IE No	Opera 41	Safari 11	WebView Android 61	Chrome Android 54	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
flipY()	Chrome 54	Edge 79	Firefox 33	IE No	Opera 41	Safari 11	WebView Android 61	Chrome Android 54	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
fromMatrix() static function	Chrome 55	Edge 79	Firefox 33	IE No	Opera 42	Safari 11	WebView Android 61	Chrome Android 55	Firefox Android 33	Opera Android 42	Safari iOS 11	Samsung Internet Android 8.0
inverse()	Chrome 55	Edge 79	Firefox 33	IE No	Opera 42	Safari 11	WebView Android 61	Chrome Android 55	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
is2D	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
isIdentity	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m11	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m12	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m13	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m14	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m21	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m22	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m23	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m24	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m31	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m32	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m33	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m34	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m41	Chrome 61	Edge 79	Firefox 33	IE No	Opera 48	Safari 11	WebView Android 61	Chrome Android 61	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m42	Chrome 61	Edge 79	Firefox 33	IE No	Opera 48	Safari 11	WebView Android 61	Chrome Android 61	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m43	Chrome 61	Edge 79	Firefox 33	IE No	Opera 48	Safari 11	WebView Android 61	Chrome Android 61	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
m44	Chrome 61	Edge 79	Firefox 33	IE No	Opera 48	Safari 11	WebView Android 61	Chrome Android 61	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
multiply()	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
rotate()	Chrome 56	Edge 79	Firefox 33	IE No	Opera 43	Safari 11	WebView Android 61	Chrome Android 56	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
rotateAxisAngle()	Chrome 56	Edge 79	Firefox 33	IE No	Opera 43	Safari 11	WebView Android 61	Chrome Android 56	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
rotateFromVector()	Chrome 56	Edge 79	Firefox 33	IE No	Opera 43	Safari 11	WebView Android 61	Chrome Android 56	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
scale()	Chrome 45	Edge 79	Firefox 33 33 Firefox 69 introduced support for the modern six-parameter syntax for scale() . Previously, it only supported the older three-parameter syntax: scale( scaleX [, originX ][, originY ]]]) .	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 部分支持 33 部分支持 33 Firefox for Android only supports the older three-parameter syntax for scale() : scale( scaleX [, originX ][, originY ]]]) , and not the six-parameter syntax.	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
scale3d()	Chrome 45	Edge 79	Firefox 33 33 Starting in Firefox 69, the first parameter ( scale ) is now optional with a default value of 1, per the specification. Previously it was required.	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33 33 Firefox for Android requires the first parameter ( scale ).	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
scaleNonUniform()	Chrome 45 — 56	Edge No	Firefox 33 — 69	IE No	Opera 32 — 43	Safari No	WebView Android No	Chrome Android 45 — 56	Firefox Android 33	Opera Android 45	Safari iOS No	Samsung Internet Android No
scaleNonUniformSelf() 弃用	Chrome 45 — 56	Edge No	Firefox 33 — 69	IE No	Opera 32 — 43	Safari No	WebView Android No	Chrome Android 45 — 56	Firefox Android 33	Opera Android 45	Safari iOS No	Samsung Internet Android No
skewX()	Chrome 54	Edge 79	Firefox 33 33 Prior to Firefox 69, the sx parameter was required; you may now call skewX() with no inputs. A value of 0 is correctly assumed.	IE No	Opera 41	Safari 11	WebView Android 61	Chrome Android 54	Firefox Android 33 33 Firefox for Android requires the sx 参数。	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
skewY()	Chrome 54	Edge 79	Firefox 33 33 Prior to Firefox 69, the sy parameter was required; you may now call skewY() with no inputs. A value of 0 is correctly assumed.	IE No	Opera 41	Safari 11	WebView Android 61	Chrome Android 54	Firefox Android 33 33 Firefox for Android requires the sy 参数。	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
toFloat32Array()	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
toFloat64Array()	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
toJSON()	Chrome 56	Edge 79	Firefox 33	IE No	Opera 43	Safari 11	WebView Android 61	Chrome Android 56	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
toString()	Chrome 54	Edge 79	Firefox 33	IE No	Opera 41	Safari 11	WebView Android 61	Chrome Android 54	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
transform()	Chrome 61	Edge 79	Firefox 33 33 Prior to Firefox 69, the tx and ty parameters were required; they are now correctly optional, each defaulting to a value of 0.	IE No	Opera 48	Safari 11	WebView Android 61	Chrome Android 61	Firefox Android 33 33 Firefox for Android requires the tx and ty parameters, specifying at least a 2D vector.	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
transformPoint()	Chrome 56	Edge 79	Firefox 33	IE No	Opera 43	Safari 11	WebView Android 61	Chrome Android 56	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
translate()	Chrome 45	Edge 79	Firefox 33	IE No	Opera 32	Safari 11	WebView Android 61	Chrome Android 45	Firefox Android 33	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0
Available in workers	Chrome 57	Edge 79	Firefox 69	IE No	Opera 44	Safari 11	WebView Android 61	Chrome Android 57	Firefox Android No	Opera Android 45	Safari iOS 11.3	Samsung Internet Android 8.0

图例

完整支持

完整支持

部分支持

部分支持

不支持

不支持

弃用。不要用于新网站。

弃用。不要用于新网站。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

• The mutable matrix type, DOMMatrix , which is based on this one.
• SVGMatrix and CSSMatrix ， SVG and CSS specific types that should be getting replaced by this interface.
• CSS matrix() and matrix3d() functional notation that can be generated from this interface to be used in a CSS transform .

元数据

• 最后修改： Jun 22, 2020

相关话题

1. DOMMatrixReadOnly
2. 构造函数

   1. DOMMatrixReadOnly()
3. 方法

   1. flipX()
   2. scale()
   3. translate()
4. Related pages for Geometry Interfaces

   1. CSSMatrix
   2. DOMMatrix
   3. 点