PR

着色とアルファとグラデーション

2008年5月15日(木)
羽田野 太巳

半透明にする

これまで図形に色を指定する方法を学んできましたが、ここでは半透明の色を指定する方法を解説していきます。

Canvasでは、半透明の色を指定する方法が2つあります。1つはfillStyleプロパティを使う方法です。もう1つはglobalAlphaプロパティを使う方法です。それぞれの使い方について詳しく見ていきましょう。まずは、fillStyleプロパティによるアルファの指定方法について解説します。

fillStyleプロパティではスタイルシートで規定された方法で色を指定することができることを学んできました。スタイルシートでは rbga(255, 0, 0, 0.5) という表記が規定されていますが、もちろん、Canvasでも利用可能です。rgbaの最後に指定した0.5という数字が透明度を表します(リスト3)。

透明度の指定は、0から1の間の小数を指定します。0は完全な透明を表し、1は透明度が全くない状態を表します。


画像をクリックすると拡大します

globalAlphaプロパティ

globalAlphaプロパティには、透明度を表す値を直接指定します。そして、個々の図形ではfillStyleプロパティで色を指定します。ただし、fillStyleプロパティには透明度を指定しません。

もしglobalAlphaプロパティに透明度を指定し、さらにfillStyleプロパティでもrgba形式で透明度を指定すると、エラーにはなりませんが、それらの透明度を掛け合わせた状態で描画されてしまいますので、注意してください。

リスト4は、前述のサンプルと全く同じ図形を同じ透明度で描きます。globalAlphaプロパティは、strokeStyleプロパティやfillStyleプロパティと同様に、2Dコンテキストに規定されたプロパティですので、プロパティ値をセットすると、以降に描かれるすべての図形に適用されます。

有限会社futomi
代表取締役。CGI/Perl総合サイト「futomi\'s CGI Cafe」を運営。ホスティングサーバ(共用サーバ)でも利用できるウェブアプリケーションの独自開発・販売を手掛ける。主にPerlによるCGI制作が中心。オーダーメードのウェブアプリケーション制作/ウェブサーバ管理業務も手掛ける。http://www.futomi.com/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています

着色とアルファとグラデーション | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。