HTML5手習い

シャドウをつける

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
shadowColor,shadowBlur,shadowOffsetX,shadowOffsetYといったプロパティを設定して、図形に影を付ける方法について学びます。
講師:
04:45

字幕

このレッスンではキャンバスに描いた図形に 影をつける方法について説明します Context オブジェクトの影関連の プロパティには次の4つがあります shadowColor で影の色を指定します shadowBlur で 影のぼけみの大きさを指定します それから shadowOffsetX と shadowOffsetY で影の方向を指定できます では実際にブラウザ上で確認してみましょう まずアセットから sleeping_cat.html sleep.jpg を用意しておいて下さい sleeping_cat.html をテキストエディタと Google Chrome で 開いて下さい 開くとこのような画面になります それではまずキャンバスに円を描きましょう 円を描くには fillStyle で塗りつぶし色の指定をします 塗りつぶし色は 150 150 150 1 にしましょう それから beginPath でパスの指定を開始します そして arc メソッドで円のパスを追加します 円の中心位置は 真ん中にもっていきたいので x 位置は width 割る 2 そして y 位置は height 割る 2 円の半径は 100 円の開始角度・終了角度は 0 から Math パイ そして fill メソッドで円を描画します リロードするとこのように円が描画されました ではこの円に影をつけてみたいと思います その前に影を黒で塗りつぶしたいので 影が分かり易いように 背景色を白に変更しましょう 背景色は最初の fillStyle の部分で 255 255 255 真っ白にします 背景色が白になりました そして影を描画するためには 図形の描画の前に影関連の プロパティを設定します shadowColor を black にします それからぼけみも指定する必要があります shadowBlur を例えば 15 程度 この数値を強くすれば強くするほど シャドウの広がりが大きくなります 15 程度ですとこのような感じの シャドウのつき方になります これを例えば 100 などにすると このように より影の広がりが大きくなります では 15 程度に戻して 影の方向性を変更してみましょう shadowOffsetX = 10 shadowOffsetY = 10 として 再度リロードすることで このように影が右下に伸びました また当然ながら 影は円以外にも 全ての図形につけることができます 例えば新しい図形を開始して moveTo で 原点を移動 そしてベジェ線を描いてみます 線のような細いものにも 影をつけることができます bezierCurveTo 100 100 200 コントロールポイントはこのように 100 100 と 400 200 の2点 そして終点を 300 300 にしてみます そして context の stroke そしてリロードしてみると このようにベジェ線が描画されて うす~く線がついてるのが分かるでしょうか 影をつけるプロパティは図形の描画ごとに 変えることができますので 例えばこのように offset をなくして blur をもう少し弱めに― 設定して再度やってみます 例えば色を red にしてみましょう するとこのように赤~い影が ついてるのが分かります このレッスンではキャンバスで描いた図形に 影をつける方法について学びました

HTML5手習い

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

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

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

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

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