HTML5手習い

クリッピング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
clipメソッドを使用して、キャンバスに描画する図形をクリッピングする方法について学びます。
講師:
07:32

字幕

このレッスンではキャンバスの clipping 機能を使って パスで定義された領域内に キャンバスの描画を clipping する方法について学びます キャンバスの clipping をするには 通常の図形の描画と同じように 先ず beginPath で指定して パスを定義します それから Context オブジェクト の clip メソッドを呼び出すことによって その図形での clipping 領域を 定義することができます clipping 領域を定義したらその後 描画をすることによって clip された描画を実現できます では実際に javaScript で実験しましょう まずはアセットから― こちらの sleeping_cat.html sleep.jpg gomoku.jpg を用意して下さい sleeping_cat.html をテキストエディタと Google Chrome で開いて下さい 開くとこのような画面になります こちらにコードを追加していきましょう その前にまず― 描画する為に画像を使いたいので 画像を読み込む為に img 要素を追加します こちらの div の main というクラスの タグの中に img 要素を追加して id は cat としておきます そして src は gomoku.jpg です そしてこの画像自体は html としては 見れなくてもいいので id で指定して display を none にしておきます リロードしてみましょう このように表示はされていませんが 要素の検証で確認すると 確かに画像ファイルがロードされています 次に画像データの 確実なロードを保証する為に window の load イベントを コードの基点とすることにしましょう window addEventListener load function の event この中に全てのコードを記述します これによりこの JavaScript が実行される時点で こちらの img 要素の gomoku.jpg という jpg のデータは ダウンロードされていることが保証できます そして今回今塗りつぶされている黒い 背景は要らないので この塗りつぶしは止めましょう そして clearRect で画面全体をクリアします canvas の width canvas の height これで塗りつぶしがなくなりました さてそれでは多角形を定義します 今回はこちらの画面の中心に位置する 多角形によって 画像の描画を clipping してみたいと思います 多角形の角数を定義する変数を まず定義します n = 8 8 角形で今回は clipping してみます そして多角形を描画する為の 補助線となる円の半径を定義します RADIUS = 200 半径 200 pixel の円を ベースとした多角形を描画することにします そして一度 多角形がちゃんと 描画されるかを確認したいので fillStyle を設定しましょう context の fillStyle = gray としておきましょう そして context の beginPath で パスの指定を開始です context moveTo で多角形の始めの点― 始点を指定します 始点や各点の定義は 円の円周上にある点からとってくるので コサインとサインを使います 一番最初の点は コサイン ゼロ 0 度の点を使います 多角形をキャンバスの中心にもってくる為に 位置を少しずらします ずらす量は canvas の width 割る 2 です キャンバスの幅の半分です そして y 座標はサイン コサインをサインに― それから width を height に 置き換えたものになります これで始点の指定ができました それからループで lineTo を 次々と回していくので ループ用の変数を定義します そして i をループ変数として n 回 まわします i が n より小さい間は n i ++ この中で context の lineTo で linetTo で指定する変数は こちらからコピーしてきて少しいじります この角度を i + 1 掛ける 2 掛ける Math π 割る n 角度の刻み幅は 2π 割る n 8 角形ですので円周全ての数値を 8で割った角度を刻みの角度とします その幅で i が増加するたびに このように掛け算を行うことで 増やしていきます y 座標の角度の計算もこちらと同様です それから context の fill で 多角形を一度描画してみましょう このようにきちんと多角形が描画されました これを clipping 領域とします ですので fill ではなく 実際には clip です これで clipping 領域が定義されました そして最後に画像を描画してみましょう drawImage で 先程追加した img 要素 これをまずは取得します document の getElementById の id は cat です そして取得した img を その dom を drawImage の1番目のパラメータに渡し そして2番目と3番目のパラメータは 描画の基点 4番目と5番目のパラメータは幅と高さです 幅と高さはキャンバスの幅と高さと 同様にしておきます canvas height これでロードすると このように― 多角形で clipping された猫の 写真が描画されました このレッスンでは多角形で描画を clipping する方法について学びました

HTML5手習い

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

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

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

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

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