English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5キャンバス要素上で最も簡単に描画できる形状の1つは矩形です。以下のように使用できます2D上下文のfillRect()関数とstrokeRect()操作を使用します。
HTML5キャンバス要素上で最も簡単に描画できる形状の1つは矩形です。以下のように使用できます2D上下文のfillRect()関数とstrokeRect()操作を使用します。以下は簡単な例です：
<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>テストを試してみてください ‹/›あなたはlineWidthを使用できます2D上下文の属性で描画矩形の線幅を設定します。以下のように設定します：
<canvas id="ex4" width="500" height="150" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d");
var x = 10;
var y = 10;
var width = 100;
var height = 100;
context.lineWidth = 4;
context.strokeRect(x, y, width, height);
</script>テストを試してみてください ‹/›これは線幅が4の矩形の外観：
あなたは以下のように使用できます 2D上下文のfillStyleまたはstrokeStyle属性で矩形の描画色を設定します。これは最初の例で、これらの設定は太字で表示されます:
<canvas id="ex5" width="500" height="150" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>テストを試してみてください ‹/›これがキャンバス上に再描画された矩形です: