2. グラフィクス
2.1 Canvas 要素の追加
Canvas 要素を追加するには、HTML ページの<body>タグ内に、<canvas>タグを挿入します。
主要な属性として、 id、width 、height があり、ここではそれぞれ myCanvas、600、400 を指定しています。
| 属性 | 意味 |
|---|---|
| id | JavaScriptから参照する際の名前 |
| width | Canvas要素の幅 (default: 300 px) |
| height | Canvas要素の高さ (default: 150 px) |
また、ブラウザが HTML5 および Canvas に対応していない場合は、<canvas>タグの内部を返します。
ここでは「あなたのブラウザは HTML5 Canvas に対応していません。」という文字を表示させることにします。
2.1.1 JavaScript からの参照
JavaScript から HTML の要素にアクセスするには、document インタフェースの getElementById() メソッドを利用します。
引数には、取得したい Canvas 要素の ID を指定します（今回の場合は myCanvas）。
基本的な二次元の描画は、2D コンテキストを通して行うことができるようになっています。
以下のように、定数 ctx を定義し、Canvas 要素から 2D コンテキストを取得します。
描画の各命令は、draw() 関数を定義してその中で実行するものとします。 ソースコードをまとめると、次のようになります。
14 ～ 16 行目で draw() 関数を定義し、17 行目で一度だけ呼び出しています。
作成した HTML ファイルを Chrome などのブラウザで開き、幅 600、高さ 400 のキャンバスができていることを確認しましょう。 加えて、「F12」キーを押して開発者モードにし、Console 画面で JavaScript のエラーが発生していないことも確認しておきましょう。
2.1.2 本ページでのコード記述について
本演習資料ページでは、ソースコード全体の見通しを良くするため、
以下のように HTML/CSS/JavaScript を分けて記載することにします。
特に、HTML のコードは<body>タグの抜粋となっていることに、注意してください。
次節以降では、Canvas の 2D コンテキストを利用して、さまざまな図形を描画する方法を紹介します。
2.2 矩形の描画
内部が塗りつぶされた矩形を描画するには、fillRect() 関数を用います。
矩形の輪郭を描画するには、strokeRect() 関数を用います。
x, y は矩形の左上角の座標、width と height は矩形の幅と高さです。
2.2.1 JavaScript コード例
単純な矩形を描画する例を以下に示します。
2.2.2 Canvas 領域の枠線描画
依然として Canvas 領域がわからない状態なので、Canvas の枠線を描画しておきます。
Canvas の幅と高さはそれぞれ canvas.width, canvas.height で取得できるので、
strokeRect() を用いて以下のように枠線を描くことができます。
2.3 パスの描画
矩形を除くすべての図形描画は、パスの描画によって行われます。
パスの開始は beginPath() 関数で行い、stroke() 関数でパスの輪郭の描画、fill() 関数でパス内部の塗りつぶしを行います。
beginPath(); // パスの開始
/*
* パスの定義
*/
stroke(); // パスの輪郭の描画
beginPath(); // パスの開始
/*
* パスの定義
*/
fill(); // パス内部の塗りつぶし
2.3.1 直線の描画
直線のパスを描画するには、lineTo() 関数を用います。
また、描画の開始位置は、moveTo() 関数で指定します。
x, y はそれぞれ Canvas 上の座標を表します。beginPath() 関数の後、パス描画の関数は連続して記述することができます。
2.3.2 JavaScript コード例
moveTo() 関数と lineTo() 関数を利用して、三角形を描画する例を示します。
fill() 関数で塗りつぶしを行う場合、パスは自動的に閉じる（現在の座標と始点が直線で結ばれる）ことに注意してください。
closePath() 関数を用いて、パスを明示的に閉じることもできます。
2.4 円弧/円の描画
円弧もしくは円を描画する場合は、arc() 関数を用います。
x, y は円/円弧の中心座標、radius は半径、startAngle は開始角、endAngle は終端角、anticlockwise (true or false) は描画方向です。
角度はラジアンで表記します。時計回りで描画を行う場合、anticlockwise の記述は省略できます。
2.4.1 JavaScript コード例
円周率は Math.PI で定義されており、円の描画は開始角 0、終端角 2 * Math.PI とすることで実現できます。
なお、moveTo() 関数を用いることで、上記コードの輪郭描画部分は、以下のように書き直すことができます。
ctx.beginPath();
ctx.arc(220, 200, 50, 0, 2 * Math.PI);
ctx.moveTo(390, 200);
ctx.arc(340, 200, 50, 0, Math.PI);
ctx.moveTo(510, 200);
ctx.arc(460, 200, 50, 0, Math.PI, true);
ctx.stroke();
演習 7-1
演習 7-1
Canvas に矩形、直線、円等を描画して、好きな絵を描きなさい。
2.5 文字列の描画
文字列の描画は fillText() 関数、文字列の輪郭の描画は strokeText() 関数によって行います。
2.5.1 フォントスタイルの変更
Canvas に描画する文字列のフォントスタイルは、font 属性によって調整可能です。
デフォルト値は 10px sans-serif です。
2.5.2 JavaScript コード例
2.6 色の変更
塗りつぶしの色は fillStyle 属性、輪郭の色は strokeStyle 属性で変更することができます。
各属性の色は、rgb 表記（例: rgb(255, 0, 0)）、16 進数カラーコード（例: #FFFFFF）、カラーネーム（例: black, orange）などで表現することができます。
透明色を使いたい場合は、rgba(r, g, b, a) を用います。透明度（a）には、0 ～ 1 の実数値が入ります。
2.6.1 JavaScript コード例
fillStroke() で文字を描画した後に、drawStroke() で輪郭を描画する例を以下に示します。
ここで lineWidth 属性は輪郭線の太さを表しており、今回は 3 に指定しています。
2.6.2 色見本
以下は、カラーネームを持つ代表的な色のチャートです。
| IndianRed #CD5C5C rgb(205, 92, 92) |
LightCoral #F08080 rgb(240, 128, 128) |
Salmon #FA8072 rgb(250, 128, 114) |
DarkSalmon #E9967A rgb(233, 150, 122) |
LightSalmon #FFA07A rgb(255, 160, 122) |
Crimson #DC143C rgb(220, 20, 60) |
| Red #FF0000 rgb(255, 0, 0) |
FireBrick #B22222 rgb(178, 34, 34) |
DarkRed #8B0000 rgb(139, 0, 0) |
| Pink #FFC0CB rgb(255, 192, 203) |
LightPink #FFB6C1 rgb(255, 182, 193) |
HotPink #FF69B4 rgb(255, 105, 180) |
DeepPink #FF1493 rgb(255, 20, 147) |
MediumVioletRed #C71585 rgb(199, 21, 133) |
PaleVioletRed #DB7093 rgb(219, 112, 147) |
| Coral #FF7F50 rgb(255, 127, 80) |
Tomato #FF6347 rgb(255, 99, 71) |
OrangeRed #FF4500 rgb(255, 69, 0) |
DarkOrange #FF8C00 rgb(255, 140, 0) |
Orange #FFA500 rgb(255, 165, 0) |
| Gold #FFD700 rgb(255, 215, 0) |
Yellow #FFFF00 rgb(255, 255, 0) |
LightYellow #FFFFE0 rgb(255, 255, 224) |
LemonChiffon #FFFACD rgb(255, 250, 205) |
LightGoldenrodYellow #FAFAD2 rgb(250, 250, 210) |
PapayaWhip #FFEFD5 rgb(255, 239, 213) |
| Moccasin #FFE4B5 rgb(255, 228, 181) |
PeachPuff #FFDAB9 rgb(255, 218, 185) |
PaleGoldenrod #EEE8AA rgb(238, 232, 170) |
Khaki #F0E68C rgb(240, 230, 140) |
DarkKhaki #BDB76B rgb(189, 183, 107) |
| Lavender #E6E6FA rgb(230, 230, 250) |
Thistle #D8BFD8 rgb(216, 191, 216) |
Plum #DDA0DD rgb(221, 160, 221) |
Violet #EE82EE rgb(238, 130, 238) |
Orchid #DA70D6 rgb(218, 112, 214) |
Magenta #FF00FF rgb(255, 0, 255) |
| MediumOrchid #BA55D3 rgb(186, 85, 211) |
MediumPurple #9370DB rgb(147, 112, 219) |
RebeccaPurple #663399 rgb(102, 51, 153) |
BlueViolet #8A2BE2 rgb(138, 43, 226) |
DarkViolet #9400D3 rgb(148, 0, 211) |
DarkOrchid #9932CC rgb(153, 50, 204) |
| DarkMagenta #8B008B rgb(139, 0, 139) |
Purple #800080 rgb(75, 0, 130) |
Indigo #4B0082 rgb(102, 51, 153) |
SlateBlue #6A5ACD rgb(106, 90, 205) |
DarkSlateBlue #483D8B rgb(72, 61, 139) |
MediumSlateBlue #7B68EE rgb(123, 104, 238) |
| GreenYellow #ADFF2F rgb(173, 255, 47) |
Chartreuse #7FFF00 rgb(127, 255, 0) |
LawnGreen #7CFC00 rgb(124, 252, 0) |
Lime #00FF00 rgb(0, 255, 0) |
LimeGreen #32CD32 rgb(50, 205, 50) |
PaleGreen #98FB98 rgb(152, 251, 152) |
| LightGreen #90EE90 rgb(144, 238, 144) |
MediumSpringGreen #00FA9A rgb(0, 250, 154) |
SpringGreen #00FF7F rgb(0, 255, 127) |
MediumSeaGreen #3CB371 rgb(60, 179, 113) |
SeaGreen #2E8B57 rgb(46, 139, 87) |
ForestGreen #228B22 rgb(34, 139, 34) |
| Green #008000 rgb(0, 128, 0) |
DarkGreen #006400 rgb(0, 100, 0) |
YellowGreen #9ACD32 rgb(154, 205, 50) |
OliveDrab #6B8E23 rgb(107, 142, 35) |
Olive #808000 rgb(128, 128, 0) |
DarkOliveGreen #556B2F rgb(85, 107, 47) |
| MediumAquamarine #66CDAA rgb(102, 205, 170) |
DarkSeaGreen #8FBC8B rgb(143, 188, 139) |
LightSeaGreen #20B2AA rgb(32, 178, 170) |
DarkCyan #008B8B rgb(0, 139, 139) |
Teal #008080 rgb(0, 128, 128) |
| Cyan #00FFFF rgb(0, 255, 255) |
LightCyan #E0FFFF rgb(224, 255, 255) |
PaleTurquoise #AFEEEE rgb(175, 238, 238) |
Aquamarine #7FFFD4 rgb(127, 255, 212) |
Turquoise #40E0D0 rgb(64, 224, 208) |
MediumTurquoise #48D1CC rgb(72, 209, 204) |
| DarkTurquoise #00CED1 rgb(0, 206, 209) |
CadetBlue #5F9EA0 rgb(95, 158, 160) |
SteelBlue #4682B4 rgb(70, 130, 180) |
LightSteelBlue #B0C4DE rgb(176, 196, 222) |
PowderBlue #B0E0E6 rgb(176, 224, 230) |
LightBlue #ADD8E6 rgb(173, 216, 230) |
| SkyBlue #87CEEB rgb(135, 206, 235) |
LightSkyBlue #87CEFA rgb(135, 206, 250) |
DeepSkyBlue #00BFFF rgb(0, 191, 255) |
DodgerBlue #1E90FF rgb(30, 144, 255) |
CornflowerBlue #6495ED rgb(100, 149, 237) |
MediumSlateBlue #7B68EE rgb(123, 104, 238) |
| RoyalBlue #4169E1 rgb(65, 105, 225) |
Blue #0000FF rgb(0, 0, 255) |
MediumBlue #0000CD rgb(0, 0, 205) |
DarkBlue #00008B rgb(0, 0, 139) |
Navy #000080 rgb(0, 0, 128) |
MidnightBlue #191970 rgb(25, 25, 112) |
| Cornsilk #FFF8DC rgb(255, 248, 220) |
BlanchedAlmond #FFEBCD rgb(255, 235, 205) |
Bisque #FFE4C4 rgb(255, 228, 196) |
NavajoWhite #FFDEAD rgb(255, 222, 173) |
Wheat #F5DEB3 rgb(245, 222, 179) |
BurlyWood #DEB887 rgb(222, 184, 135) |
| Tan #D2B48C rgb(210, 180, 140) |
RosyBrown #BC8F8F rgb(188, 143, 143) |
SandyBrown #F4A460 rgb(244, 164, 96) |
Goldenrod #DAA520 rgb(218, 165, 32) |
DarkGoldenrod #B8860B rgb(184, 134, 11) |
Peru #CD853F rgb(205, 133, 63) |
| Chocolate #D2691E rgb(210, 105, 30) |
SaddleBrown #8B4513 rgb(139, 69, 19) |
Sienna #A0522D rgb(160, 82, 45) |
Brown #A52A2A rgb(165, 42, 42) |
Maroon #800000 rgb(128, 0, 0) |
| White #FFFFFF rgb(255, 255, 255) |
Snow #FFFAFA rgb(255, 250, 250) |
HoneyDew #F0FFF0 rgb(240, 255, 240) |
MintCream #F5FFFA rgb(245, 255, 250) |
Azure #F0FFFF rgb(240, 255, 255) |
AliceBlue #F0F8FF rgb(240, 248, 255) |
| GhostWhite #F8F8FF rgb(248, 248, 255) |
WhiteSmoke #F5F5F5 rgb(245, 245, 245) |
SeaShell #FFF5EE rgb(255, 245, 238) |
Beige #F5F5DC rgb(245, 245, 220) |
OldLace #FDF5E6 rgb(253, 245, 230) |
FloralWhite #FFFAF0 rgb(255, 250, 240) |
| Ivory #FFFFF0 rgb(255, 255, 240) |
AntiqueWhite #FAEBD7 rgb(250, 235, 215) |
Linen #FAF0E6 rgb(250, 240, 230) |
LavenderBlush ##FFF0F5 rgb(255, 240, 245) |
MistyRose #FFE4E1 rgb(255, 228, 225) |
| Gainsboro #DCDCDC rgb(220, 220, 220) |
LightGray #D3D3D3 rgb(211, 211, 211) |
Silver #C0C0C0 rgb(192, 192, 192) |
DarkGray #A9A9A9 rgb(169, 169, 169) |
Gray #808080 rgb(128, 128, 128) |
DimGray #696969 rgb(105, 105, 105) |
| LightSlateGray #778899 rgb(119, 136, 153) |
SlateGray #708090 rgb(112, 128, 144) |
DarkSlateGray #2F4F4F rgb(47, 79, 79) |
Black #000000 rgb(0, 0, 0) |
2.7 Canvas の座標系
Canvas の描画における座標系は、標準的なプログラミングにおける座標系と同じで、
左上が原点 (0,0) となっており、右下が (width, height) となっています。
この座標系を変更したい場合、描画処理のタイミングで計算することもできますが、
translate()、rotate()、scale() で簡単に座標変換ができるようになっています。
2.7.1 座標の平行移動
座標系の原点を移動させたい場合は、translate() を用います。
x, y は原点座標の移動量を表します。
2.7.2 座標の回転
座標系を回転させたい場合は、rotate() を用います。
rotate() を使うと、原点を中心にして、時計回りに angle だけ座標系を回転させられます。
ここで、angle はラジアンであるため、度数 (degrees) を用いる場合は Math.PI / 180 を乗じて変換します。
回転の中心を変更するには、rotate() の前に translate() を使用し、原点を移動させる必要があります。
2.7.3 座標のスケーリング
座標系を拡大・縮小させたい場合は、scale() を用います。
Canvas の座標系を、x, y で指定した分だけスケーリングすることができます。
x, y の絶対値が 1 よりも大きければ拡大、1 よりも小さければ縮小となります。
また、負数を用いると、軸を反転させることができます。
2.7.4 状態の保存と復元
座標系やスタイルなど、Canvas の状態を保存したい場合は save() を用います。
保存した状態は、restore() で復元することができます。
演習 7-2
演習 7-2
Canvas の中心が原点となるデカルト座標系を用意し、数学関数（n次関数/指数関数/三角関数等）を用いた絵を自由に描きなさい。