SYNCERのロゴ
アイキャッチ画像

Document.exitPointerLock() - ポインターロックを解除する

exitPointerLock()は、Documentのメソッドです。ポインターロックを解除します。

概要

名前
exitPointerLock
所属
Document
IDL
void exitPointerLock();
仕様書
https://w3c.github.io/pointerlock/#dom-document-exitpointerlock

説明

引数はありません。返り値もありません。

デモ

Document.exitPointerLock()のデモです。茶色い部分でクリックするとポインターロックを開始します。そしてもう一度クリックすると、メソッドを実行してポインターロックを解除します。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<body>
	<canvas width="200" height="200"></canvas>
<script>
// イベント
var number = 0 ;

var
	canvas = document.getElementsByTagName( "canvas" )[0] ,
	context = canvas.getContext( "2d" ) ;

var
	start = function() {
		canvas.requestPointerLock() ;
	} ,
	end = function () {
		document.exitPointerLock() ;
	} ,
	startOrEnd = function () {
		if ( document.pointerLockElement === canvas || document.mozPointerLockElement === canvas ) {
			document.onmousemove = canvasUpdate ;
			document.onclick = end ;
		} else {
			document.onmousemove = null ;
			document.onclick = start ;
		}
	}

var
	x = 0 ,
	y = 0 ,
	radius = 8 ,
	canvasDraw = function () {
		context.beginPath() ;
		context.arc( x, y, radius, 0, (Math.PI / 180) * 360, true ) ;
		context.fillStyle = "#D36015" ;
		context.fillRect( 0, 0, canvas.width, canvas.height ) ;
		context.fillStyle = "#2660a1" ;
		context.fill() ;
	} ,
	canvasUpdate = function ( e ) {
		x += e.movementX ;
		y += e.movementY ;

		var
			xLimit = canvas.width + radius ,
			yLimit = canvas.height + radius ;

		if ( x > xLimit ) x = -radius ;
		if ( y > yLimit ) y = -radius ;
		if ( x < -radius ) x = xLimit ;
		if ( y < -radius ) y = yLimit ;

		canvasDraw() ;
	}

canvas.requestPointerLock = canvas.requestPointerLock || canvas.webkitRequestPointerLock || canvas.mozRequestPointerLock ,
document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock ;
document.onpointerlockchange = document.onmozpointerlockchange = startOrEnd ;
document.onclick = start ;
canvasDraw() ;
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
37+ 50+ 10+× 24+× 4.4+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月6日 (金)
コンテンツを公開しました。