CanvasRenderingContext2D.rect()

この記事は翻訳が完了していません。 この記事の翻訳にご協力ください

Canvas 2D APIのCanvasRenderingContext2D.rect() メソッドは、2Dウィンドウのサイズ(width, height)や開始位置(x, y)を定義できるメソッドです。

ウィンドウのサイズと開始位置をもとに直線で引かれたウィンドウが2Dウィンドウになり、fillメソッドでウィンドウ内の塗りつぶしをしたり、strokeメソッドでウィンドウの外周を直線で囲み、可視化することなどできます。

構文

void ctx.rect(x, y, width, height);

パラメーター

x

2Dウィンドウの開始位置(x軸)

y

2Dウィンドウの開始位置(y軸)

width

2Dウィンドウの幅

height

2Dウィンドウの高さ

例

 rect メソッドの使用方法

この例は、 rect メソッドを使用してウィンドウの作成をするシンプルなコードです。
内容は、canvas内に作成したウィンドウに対して、fill() を実行し、ウィンドウ内を黒塗りにしているだけになります。
上に記載してあるウィンドウを黒塗りする fill() 以外にも、

などが存在しているので、参考にしてみてください。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.fill();

下のコードを変更してみよう:

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.rect(10, 10, 100, 100);
ctx.fill();</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

仕様書

仕様書 ステータス 備考
HTML Living Standard
CanvasRenderingContext2D.rect の定義		 現行の標準  

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
rectChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 11.6Safari 完全対応 2WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 12Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報