HTML5手習い

円の描画

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
beginPath,arc,stroke,fillといったメソッドを使用して、Canvasに円を描画する方法について学びます。また、円の角度を指定するためのラジアンという単位についても説明します。
講師:
08:29

字幕

このレッスンでは canvas の上に 円を描く方法について説明します それでは アセットの sleeping_cat.html というファイルと sleep.jpg というファイルを ホームディレクトリーに コピーしておいてください sleeping_cat.html というファイルを テキストエディターと Chrome で 開いてください 開くとこのように猫の画像の上に 半透明の四角形が描画されます 半透明の四角形を描画している部分は html の下のあたりのこの部分です fillStyle をこのように rgba 関数を用いて 0, 0, 0, 0.8 という風に指定しています rgba 関数では 4 番目のパラメータは α (アルファ)値の指定になります canvas は何も塗りつぶさない デフォルトの状態では α ゼロの透明です そして 0.8 というように 半透明で描画すれば このように半透明に canvas が透けて その下の背景が合成されます 例えば rgba を 0, 0, 0, 0 とすれば このように canvas は全く 描画されなくなります 0, 0, 0, 0.1 に変更すれば このように canvas がかなり薄く html の背景の上に合成されて描画されます では 元の 0.8 に戻してください このように canvas は 他の html 要素と組み合わせて その上から重ねて合成するような 使い方ができるのです それでは 具体的に円を描く やり方に入っていきましょう canvas に図形を描画するためには まずcanvas の context オブジェクトの beginPath メソッドを 呼び出す必要があります canvas ではまず beginPath メソッドを呼び出して その後に様々な図形の 描画命令を呼び出します そして最後に図形をどのように 描画するかという命令を呼び出すことによって 図形の描画が完了します それでは beginPath 命令を書きましょう context オブジェクトの beginPass そしてこの命令を書いてから この下に様々な 図形描画命令を書いていきます canvas に円形のパスを 追加するためのメソッドは context オブジェクトの arc メソッドです arc メソッドはこのように 円の始点の x y それから円の半径の長さ そして円の開始位置の角度と 終了位置の角度を引数としてとります 開始位置と終了位置が 360 度より小さい値であれば 円の一部分を描画するということになります また角度の始点には度数表記ではなく ラジアン表記を使います 日常生活でよく使われる角度の指定は 度数表記 0 度から 360 度で 一周を表す表記になるかと思います しかしながら数学やプログラミングでは 角度の指定に度数表記ではなく ラジアン表記というものを使うことが多いです ラジアン表記とは 0 度の位置は 0 ラジアン そして 90 度の位置は π/2 ( 2分のパイ)ラジアン 180 度が π ラジアン そして 270 度が 3π/2 ( 2 分の 3 パイ)ラジアン そして戻ってきて 360 度を 2 π ( 2 パイ)ラジアンというー 対応をつける表記の仕方です ここで π (パイ)というのは円周率 即ち 3.14 の値のことを示しています ラジアン表記を用いることで 様々なメリットがあります 例えばラジアン表記では 円の半径と角度を掛けることで それがそのまま円弧の長さとなります ラジアン表記と度数表記の間での 変換の式は次のようなものになります 度数からラジアンへの変換は 180 分のパイをその度数に掛ければ それがラジアンの値になります またラジアンから度数への変換は その度数にパイ分の 180 先程の逆数を掛ければ それが度数での値となります では arc 関数を使って 円を描画してみましょう context.arc の原点は 100 100 x=100 y=100 の位置とします そして半径の長さは 50 pixel それから開始位置は 0 度 0 ラジアンですね それから終了位置は 2π ラジアン ちなみにパイの値は Math.PI という プロパティから取得することができます 0 から 2π までですので 円を一周描くという意味になります begin オブジェクトで 図形の描画を始めて 何らかのパスを追加した後には stroke (ストローク)を呼び出すことによって 追加されたパスの stroke を 描画することができます beginPath で図形の描画を開始して arc で円のパスを追加しましたので context.stroke と呼び出すことによって 円の描画ができます また描画される stroke の色は context の strokeStyle で指定できます rgba の 150, 150, 150, 1 という値で 円を描画してみましょう ブラウザをリロードします このように円が描画されました 例えば終了位置を 0 ラジアンから 1 ラジアンまでにすれば このように半円が描画されますし これを π/2 ラジアンまでにすれば このように 1/4 の円弧が描画されます また 3 番目のパラメータ 半径の長さを大きくすれば このように先程よりも大きな円が描画されます また始点の位置をずらせば 円の中心点の位置を変更することができます context オブジェクトの fill (フィル)メソッドを使うことによって 追加されたパスの stroke を描画するだけではなく そのパスを塗りつぶすことができます 今 stroke で描画していたものを fill に変更してみましょう そして塗りつぶし色も変更する必要があります 塗りつぶし色を変更しない場合には 直前の指定がそのまま 継続されてしまいますので ここで指定されているものと 全く同じ色で描画されてしまいます ですので ここで fillStyle を 変更しておく必要があります ブラウザをリロードします すると今度はこのように 円が塗りつぶされて描画されました もちろん 円は 何度でも描画し直すことができます 別の位置で描画してみましょう このように beginPath arc fill を 使うことによって context に円を描画することができます このレッスンでは canvas に 円を描画する方法について学びました

HTML5手習い

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

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

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

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

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