キャンバスに塗りつぶされた四角形を表示する

説明

キャンバスに塗りつぶされた四角形を表示するにはfillrect()を使います。パラメータには四角形の左上と右下の座標を指定します。塗りつぶされる四角形の色はfillStyleで指定します。fillStyleには文字列でrgba(赤の輝度,緑の輝度,青の輝度,不透明度)を指定します。輝度は0がもっとも暗く、255がもっとも明るくなります。不透明度は0で完全な透明、1で完全な不透明になります。

サンプルプログラム

window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgba(0,0,255,1)"; // 青色にする
context.fillRect(160,120,320,240); // 塗りつぶす
}
サンプルを実行
[戻る]