CanvasRenderingContext2D.rect()

This translation is incomplete. Please help translate this article from English

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

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`rect`	Chrome 完全対応あり	Edge 完全対応 12	Firefox 完全対応 1.5	IE 完全対応あり	Opera 完全対応あり	Safari 完全対応あり	WebView Android 完全対応あり	Chrome Android 完全対応あり	Firefox Android 完全対応 4	Opera Android 完全対応あり	Safari iOS 完全対応あり	Samsung Internet Android 完全対応あり

凡例

完全対応: 完全対応