JavaScript入門[HTML5編]色と不透明度の設定

色を指定する命令文

最初に、色や不透明度を指定する命令文を見ておきます。

context.strokeStyle

線の色と不透明度を指定します。

context.fillStyle

塗り潰しの色と不透明度を指定します。

context.globalAlpha

不透明度を0.0～1.0の間で指定します。

0が完全な透明で、1が完全な不透明です。

色だけを指定することもあれば、色と不透明度を同時に指定することも可能です。 下に例をあげておきます。rgbaは赤，緑，青，不透明度の順で指定します。

context.strokeStyle = "red";  //線の色を赤にする
context.fillStyle = "rgba(0,0,255,0.3)"; //青で不透明度0.3で塗り潰す

私だけかも知れませんが、rgbaの指定をする時、クォーテーションを忘れやすいので気をつけましょう。

線と塗り潰しの色を設定する

ここではまず色の指定をするスクリプトを見てみましょう。

<canvas id="cv" width="360" height="240"></canvas>

<script>
var ctx = document.getElementById("cv").getContext("2d");

ctx.lineWidth = 20;

ctx.strokeStyle = "green";  //線の色を緑に指定
ctx.fillStyle = "red";  //塗り潰しの色を赤に指定
ctx.strokeRect(40,40,200,100);
ctx.fillRect(40,40,200,100);
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

不透明度の設定

次に不透明度を指定した画像を見てみましょう。 以下のスクリプトは３つの正方形を重ねています。 どのように表示されるか確認して下さい。

<canvas id="cv2" width="360" height="240"></canvas>

<script>
var ctx2 = document.getElementById("cv2").getContext("2d");

ctx2.fillStyle = "rgba(255, 0, 0, 0.5)"; //不透明度0.5、赤で塗り潰し
ctx2.fillRect(100,20,160,160);
ctx2.fillStyle = "rgba(0, 255, 0, 0.5)"; //不透明度0.5、緑で塗り潰し
ctx2.fillRect(50,40,160,160);
ctx2.fillStyle = "blue"; //青で塗り潰し
ctx2.globalAlpha = 0.5;  //不透明度を0.5に指定
ctx2.fillRect(150,60,160,160);
</script>
</section>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

不透明度を0.5にしているので、四角が重なっている部分も下の図形が見えているのが確認できます。