HTML5手習い

ピクセルの合成

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
globalCompositeOperationプロパティを変更して、キャンバズに描画する図形の合成方法を変換する方法を学びます。また、color-dodge演算を使用した作例を紹介します。
講師:
13:20

字幕

このレッスンではキャンバスで ピクセルのさまざまな 合成演算が利用できることを学びます ピクセルの合成演算を利用するには contextオブジェクトの globalCompositeOperationプロパティに 値を代入します それではみてみましょう まずはじめにアセットのcomposition.htmlを テキストエディタと Google Chromeで開いてください Google Chromeでhtmlを開くと このように赤 緑 青の円が 白い背景の上に描画されます それではソースコードを 簡単にみてみましょう ソースコードをみるとまず キャンバスの幅と高さを設定して その後に背景を白で 全て塗りつぶしています その後CompositeOperationを source-overに設定し それから drawRed drawGreen drawBlue という関数で 赤 緑 青 の円を 順番に描画しています それぞれの関数はalphaという― 透明度を表すパラメーターを とるようになっています その関数の中身では ただ単に円を描画しているだけです globalCompositeOperationの デフォルト値はsource-overです source-overが設定されている場合には― 背景に対して新しく描画しようと している図形が上書きされます それではこちらのsource-overを コメントアウトして source-inを設定してみましょう source-inでは 背景に描画されている図形と 新しく描画しようとしている図形が 重なる部分のみが 新しく描画しようとしている 図形の色で塗りつぶされます そのためreloadすると このように青が部分的に描画されました 順を追ってみてみましょう まずは全ての円の描画を コメントアウトします そしてreloadするとこのように 真っ白な画面になりました そして次にdrawRedのコメントアウトを 外してreloadすると このように背景は黒で それから赤い円が描画されました これは背景の色が付いている部分 全体ですね 全体と 新しく描画される赤い図形の 重なる部分が 赤い図形の部分のみであったために その部分が赤で 塗りつぶされたのです 次にdrawGreenの コメントアウトも解きましょう そしてreloadすると このように赤い円があった部分と それから青い円の部分の 重なる部分が緑で塗りつぶされます そして最後にdrawBlueの コメントアウトも解くと このように3つの円の 全ての重なる部分が 最後に塗った青い色で 塗りつぶされました これがsource-inの効果です では次にdestination-overを みてみましょう source-inをコメントアウトして destination-overのコメントアウトを解きます destination-overでは 通常の描画とは異なり 先に描画されている背景の さらに背面に 新しく描画する 図形を描画します 今の状態では最初に背景が すべて白で塗りつぶされてしまいますので こちらの最初の白で塗りつぶす部分を コメントアウトしましょう その上でreloadすると― このように赤 緑 青の円が 3つ描画されました 違いがわかりますでしょうか destination-overを コメントアウトすると― このように3つの円が描画されますが 描画される順番が違います 再度destination-overを 有効にしてreloadすると このように最初にまず 赤い円が描画されます そして次に緑の円が 描画されるのですが 通常ですと上書きされるために 緑が前面にくるはずです しかしながらdestination-overが 指定されているために 緑が背面に描画されました そして次に青い円がさらに 背面に描画されています それでは次にlighterをみてみましょう lighterを有効にします そしてreloadすると このような画像が現れました lighterはいわゆる加算合成で 背景のピクセル値と 新しい図形のピクセル値を 単純に足し合わせて表示します ここでは背景はまず黒ですので すべて0です そこに対してまず赤い図形を 赤い円を描画します すると円で塗りつぶされた部分の ピクセル値はすべて255になります 赤の成分のみ255で 青と緑の成分は0です そこに対してさらに青い円を 重ねて描画すると 赤い円がなかった部分は 緑の成分のみ255で他は0 ところが赤い円と重なる部分は Rのコンポーネントが255で 緑のコンポーネントも 255ですので黄色になります またさらに青を描画すると すべての円が重なる部分は RGBすべてのコンポーネントが 255になりますので白になります これがlighterの効果です 次にxorをみてみましょう xorに設定してreloadすると このような形になります xorでは背景の図形と これから描画しようとしている図形の 重ならない部分のみが塗りつぶされます これも順を追ってみてみましょう まず全ての円をコメントアウトします するとこのように黒くなりました そして最初に 赤い円のみを描画すると このように背景と新しい赤い円で 重なる部分は全くないため 赤い円が全て描画されました そして次にdrawGreenの コメントアウトを解いて描画すると このように赤い円と緑の円で 重ならない部分のみが描画されました 重なる部分は透明になりますので このように黒くなりました そして全てのコメントアウトを解くと このように赤と青 青と緑で 互いに重なる部分は透明になります そして重ならない部分は そのまま青になるのですが こちらの中心の部分は 赤と緑が重なったために 透明になっていました その透明になっていた状態に対して さらに青が上書きされて その部分においては青と 重なる色がなかったために 青がでてきました これがxorの効果です このほかにも様々な値があります ここに全ての値を列挙してありますので 試してみてください それではcolor-dodgeを使った 興味深い作例を一つ紹介します color-dodgeというエフェクトは 新しく描画する図形のピクセル値をみて そのピクセル値が明るければ 背景をさらに明るく そのピクセル値が暗ければ そのまま残す という効果になります それではソースコードの 他の部分は要りませんので キャンバスの幅の設定から 下の部分は全て削除してしまいましょう ここに新しくプログラムを書いていきます まずcontextオブジェクトの globalCompositeOperationを color-dodgeに設定しましょう それからこのプログラムでは 円を描画します 円を描画する関数を作成します drawCircle この関数はcontextオブジェクトを まず一つ目のパラメーターにとり そして円を描画する中心座標を パラメーターにとります それから背景も パラメーターとして受け取り グラデーションのかかった円を 描画するために グラデーションの両端の色も パラメーターとしてとります color1 color2という パラメーター名にしておきます そしてまず最初に gradientオブジェクトを作成しましょう gradient = context.createGradient createRadialGradientですね そしてRadialGradientの グラデーションの中心値は 円の中心と同じにします 半径も円の半径と同じにします そしてグラデーション終了の もう一つの円の中心も x y パラメーターで 与えられたものにします それからグラデーション 終了時の円の半径は0 中心の点です そしてgradientに色を追加しましょう グラデーションの始まりの色はcolor1 それからグラデーションの終わりの色 1で指定される色ですね これはcolor2に設定します それからcontextのfillstyleを いま作成した gradientオブジェクトにします そしてbeginPathで図形の描画を開始し arcでパスを指定します 円の中心はパラメーターで与えられたもの 半径もパラメーターで与えられたもの そして開始角度 終了角度は 0から2PIです そして円を塗りつぶします それではこの関数を使って 描画してみましょう drawCircleのまず一番目は contextオブジェクト そして二番目は キャンバスの中心に描画してみましょう キャンバスの中心ですので widthとheightを割る2したものですね それから半径は150にします そして色はrgba(0,0,0,0) 透明ですね それからもう一つの色は rgba(50,50,50,1) こっちは不透明で ちょっと暗めの黒に近い色ですね さてこれで描画してみましょう エラーが起きました drawCircle関数のスペルが 少し間違っていました さてこれを修正して再度reloadすると arcメソッドがcがgになっていましたね これも修正して再度描画 するとこのようなぼんやりとした グラデーションが表示されました さてではこれはもう一つ同じ位置に 重ねて描画してみます するとこのように ぼやけが少し大きくなりました ではこれをもっとたくさん重ねてみましょう for文を使ってループをまわします 15回ほど重ね描きしてみましょう するとこのように暗闇で 光が光っているような効果が得られました これはdodge効果によって 明るい部分は明るく 暗い部分はそのままに というのをたくさん重ねたために このような見た目が現れたのです キャンバスでは使用できる 色の階調が0から255までと 少ないのでこのように 荒れが見えてしまっていますが 例えばWebGLなどで― 浮動小数点数の色を使って 同じことをやれば もっと綺麗な― 暗闇で色が光るような効果が得られます このレッスンではキャンバスで さまざまなピクセルの合成演算が 使用できることを学びました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。