---
title: DOMPoint
slug: Web/API/DOMPoint
translation_of: Web/API/DOMPoint
---
<div>{{APIRef("DOM")}}</div>

<p><span class="seoSummary">DOMPoint 对象表示坐标系中的2D 或3D 点;它包括三维度的坐标值以及可选的透视值。DOMPoint 基于 DOMPointReadOnly, 但允许更改其属性值。</span></p>

<p><span class="seoSummary">通常, 正 x 分量表示原点右侧的位置, 正 y 分量从原点向下, 正 z 分量从屏幕向外延伸 (换言之, 朝向用户)。</span></p>

<h2 id="Constructor">Constructor</h2>

<dl>
 <dt>{{domxref("DOMPoint.DOMPoint","DOMPoint()")}}</dt>
 <dd>Creates and returns a new <code>DOMPoint</code> object given the values of zero or more of its coordinate components and optionally the <code>w</code> perspective value. You can also use an existing <code>DOMPoint</code> or <code>DOMPointReadOnly</code> or a {{domxref("DOMPointInit")}} dictionary to create a new point by calling the {{domxref("DOMPoint.fromPoint()")}} static method.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<p><em><code>DOMPoint</code> inherits methods from its parent, {{domxref("DOMPointReadOnly")}}.</em></p>

<dl>
 <dt>{{domxref("DOMPointReadOnly.fromPoint", "fromPoint()")}}</dt>
 <dd>Creates a new mutable <code>DOMPoint</code> object given an existing point or a {{domxref("DOMPointInit")}} dictionary which provides the values for its properties.</dd>
</dl>

<h2 id="Properties">Properties</h2>

<p><em><code>DOMPoint</code> inherits properties from its parent, {{domxref("DOMPointReadOnly")}}.</em></p>

<dl>
 <dt>{{domxref("DOMPointReadOnly.x", "DOMPoint.x")}}</dt>
 <dd>The x coordinate of the <code>DOMPoint</code>.</dd>
 <dt>{{domxref("DOMPointReadOnly.y", "DOMPoint.y")}}</dt>
 <dd>The y coordinate of the <code>DOMPoint</code>.</dd>
 <dt>{{domxref("DOMPointReadOnly.z", "DOMPoint.z")}}</dt>
 <dd>The z coordinate of the <code>DOMPoint</code>.</dd>
 <dt>{{domxref("DOMPointReadOnly.w", "DOMPoint.w")}}</dt>
 <dd>The perspective value of the <code>DOMPoint</code>.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>In the <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a>, <code>DOMPoint</code> values are used to represent points in the coordinate space that the user's head mounted display exists in. In the following snippet, the position of the VR HMD can be retrieved by first grabbing a reference to the position sensor's current state using {{domxref("PositionSensorVRDevice.getState()")}}, then accessing the resulting {{domxref("VRPositionState")}}'s {{domxref("VRPositionState.position","position")}} property, which returns a <code>DOMPoint</code>. Note below the usage of <code>position.x</code>, <code>position.y</code>, and <code>position.z</code>.</p>

<pre class="brush: js">function setView() {
  var posState = gPositionSensor.getState();

  if (posState.hasPosition) {
    posPara.textContent = 'Position: x' + roundToTwo(posState.position.x) + " y"
                                        + roundToTwo(posState.position.y) + " z"
                                        + roundToTwo(posState.position.z);
    xPos = -posState.position.x * WIDTH * 2;
    yPos = posState.position.y * HEIGHT * 2;

    if (-posState.position.z &gt; 0.01) {
      zPos = -posState.position.z;
    } else {
      zPos = 0.01;
    }
  }

  /* ... */

}</pre>

<div class="note">
<p><strong>Note</strong>: See our <a href="https://github.com/mdn/webvr-tests/blob/gh-pages/positionsensorvrdevice/index.html">positionsensorvrdevice demo</a> for the full code.</p>
</div>

<h2 id="Specification" name="Specification">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}</td>
   <td>{{Spec2('Geometry Interfaces')}}</td>
   <td>Latest spec version is an ED.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("api.DOMPoint")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref("DOMRect")}}</li>
 <li>{{domxref("DOMMatrix")}}</li>
</ul>