ほんっとにはじめてのHTML5とCSS3：[69-2] Canvasに基本的な図形を描こう

[69-2] Canvasに基本的な図形を描こう

最終更新日：2019年02月06日　（初回投稿日：2014年03月27日）

今回は、Canvasに基本的な図形を描いてみます。

今回は、四角形、三角形、円弧を作り、色指定（線や、塗りつぶし、色の透明度）もやってみます。応用で、扇型を作り、円グラフも作ってみます。

今回のサンプルはこちら。
（クリックでサンプルが別ウィンドウで開きます）

本日のINDEX

Canvas の準備
四角形を描く
1. canvasでの色指定について（線や塗りの色、透明度）
三角形（多角形をパスで）を描く
円弧を描く
度数をラジアン（radian）へ変換
円弧の応用で扇型を作ろう
扇型で円グラフを作ってみよう

Canvas の準備

HTML上に<canvas>要素を作っておきます

<canvas>要素をHTML上に作っておきます。
width属性、height属性でサイズ指定し、id属性で名前を付けます。
（サイズはCSSなどで指定してもOK）

<canvas>と</canvas>の間に、未対応ブラウザ用の代替コンテンツも入れられます。
代替コンテンツは <canvas>に対応したブラウザでは表示されません。

<canvas id="canvas1" width="678" height="200">
  <!--↓代替えコンテンツ-->
  <img src="image.png" alt="図形">
</canvas>

これで、透明な四角いキャンバスが画面上にできます。

この<canvas>要素の左上の角が、描画の基準点 (x=0, y=0) になるって覚えておこう。

<canvas>要素に関しては、もうこれ以上すること無し。
CSSでスタイルを指定することぐらい。（マージンとか背景色などを適宜指定します）

JavaScriptの「実行のタイミング」と「実行するfunction（関数）」

実行のタイミング は、
ただ普通に表示するだけなら「onload = function()」を使います。
これは このHTMLファイルがロードされたタイミングで実行 という指令。

ロード時に実行するには、<body>要素に <body onload="関数名();"> と書く方法もあるけど、
onload は<script>要素内で指定するほうが良いそうです。

クリックした時に実行したければ「onclick="関数名()"」で指定。これは後日詳細。

実行するfunction（関数）は、
function 関数名() { } で、{ } の中に、描画のためのコードを書きます。
関数名は、なんでも好きな名前でOK。サンプルでは kihon にしています。
「実行のタイミング」と「実行するfunction」は順不同。どっちが先でも後でもOK

<script>
  // ↓ 実行のタイミング
onload = function() {
    kihon();
};
  // ↓ 実行するfunction
function kihon() {
    // ここに kihon() の内容を書く
}
</script>

HTMLファイルに JavaScript を書く場所は、
HTML の<head>部分でも <head>部分でもどちらでもOK。
<script>要素を使います。

サンプルでは、ソースコードが見やすいように HTMLの<head>部分に全部書いてますが、Canvasのソースコードは長くなりがちなので、外部ファイルにしたほうが良いかも。
拡張子「.js」をつけたファイルにして、<script>要素で読み込みます。

<script src="○○○.js"></script>

複数の function を指定したい場合

<canvas>要素が複数ある場合は、function も分けたほうが編集しやすいです。
複数の function を指定したい場合には、下記のように描けばOK。

onload = function() {
    kihon();
    pie();
};

function kihon() {
     // ここに kihon() の内容を書く
}
function pie() {
    // ここに pie() の内容を書く
}

「対象にする canvas」を指定し、「2Dコンテキスト」を取得する

では、「実行する function」の中身を書いて行きます。

最初に 対象にする <canvas>要素を特定します。
そしてその Canvasに 2Dコンテキストの指定もします。

function kihon() {
    var cnvs = document.getElementById('canvas1');
    var ctx = cnvs.getContext('2d');

    ctx.strokeStyle = ..... 
    // ここに kihon() の内容が続く
}

1行目の「var cnvs = document.getElementById('canvas1');」は、
対象にする Canvas を指定しています。
<canvas>要素に付けたID名を呼び出し、その<canvas>要素を、ここでは「cnvs」という変数に代入しています。変数名は好きにつけてOK。

2行目の「var ctx = cnvs.getContext('2d');」は、
1行目でターゲットにした canvas を、2D（2次元=平面）グラフィックスとして扱うと指定しています。canvas のために用意されている 2Dコンテキストを取得するための指定です。

で、その2Dで扱うグラフィックスを、変数「ctx」と呼ぶ、と指定しています。
この変数名も好きに付けてOK。ここでは context の略で「ctx」とつけました。

ちなみに、
このように丁寧に2行に分けなくても、
「var ctx = document.getElementById('canvas1').getContext('2d');」
という書き方でも同じです。こっちのほうがカンタンかも。

これ以降、この変数「ctx」を使って、「ctx.strokeStyle = . . . 」といった具合で、グラフィックスを指定して行きます。
で、「canvas1」という名の<canvas>への描画が行われるというわけです。

四角形を描く

ではさっそく、まずは基本の四角形を描いてみます。
四角形は「Rect」で表します。Rect は Rectangle（矩形, 長方形）の略です。

strokeRect(x,y,w,h); で、線による四角形を描く
x,yは四角形の左上の角の座標。座標の基準は <canvas>の左上を x=0, y=0 とします。
wは四角形の幅、hは高さ。ピクセルで指定します。
fillRect(x,y,w,h); で、塗つぶしの四角形を描く
clearRect(x,y,w,h); で、その四角形の領域をクリア（透明に抜く）

上記の四角形の指定だけだと、clearRect以外はデフォルトの黒で描画されます。
（strokeRectは黒い線で、fillRectは黒い塗りで表示されます）

ですので必要に応じて色指定をします。
線の色指定は「strokeStyle」、塗りの色指定は「fillStyle」で行います。

とりあえずサンプルの四角形のソースを見てみましょう。
（クリックでサンプルが別ウィンドウで開きます）

// 四角形＿線（strokeStyleで線の色、strokeRect(x,y, width,height)で四角形）
    ctx.strokeStyle = 'rgb(0,191,255)';
    ctx.strokeRect(35,50, 100, 100);
    
// 四角形＿塗りつぶし（fillStyleで塗りの色、fillRectで四角形）
    ctx.fillStyle = 'rgb(129,200,49)';
    ctx.fillRect(170,50, 160,100);
    
// 四角形＿くりぬき（clearRectでくりぬき）
    ctx.clearRect(230,60, 40,80);

上のサンプルソースでは、rgb() で色指定をしていますが、#ccc など、CSSで使用する指定方法なら何でも使えます。

色指定は描画の前に。これは鉄則です。

ちなみに、
線も塗りもある四角形を作りたい場合もあります。そんなときは、
同じ座標の fillRect と strokeRect を指定する（四角形を2コ重ねて作る）か、
下の、三角形を描く（多角形を、パス（線）で描画する）の要領で四角形を作れば、線と塗りを同時に指定することができます。

canvasでの色指定について（線や塗りの色、透明度）

色指定や透明度の指定は 描画より「前に」書きます。コレ重要！
描画した後で色指定してもムリ。真っ黒。

★色指定の方法はCSSと同じで、16進数や rgb() naどが使えます。
（グラデーションの場合は、CSSの指定とは異なります（後日詳細））

// 線の色指定の例
ctx.strokeStyle = 'rgb(0,191,255)';

// 塗りの色指定の例
ctx.fillStyle = '#fff';

★透明度の指定

rgba()
rgba() で、() の中に、red, green, blue, alpha の順に数値で指定しますが、
最後の alpha が透明度。0〜1で表し、0が透明。1が不透明（100％）。
50％の半透明にしたければ、 0.5 にします。
この指定は、特定の線や塗りにピンポイントで適用できます。
```
//塗りの半透明の例
ctx.fillStyle = 'rgba(255,153,153,0.5)';
```
globalAlpha
これは色の指定とは別に、描画するグラフィクスの透明度を指定するもの。
透明度は0〜1で表し、0が透明、1が不透明（100％）なのは上と同じ。
1度指定すると、それ以降の描画が全部この透明度になるので要注意。
不要になったら透明度100％に戻す指定が必要です。
```
ctx.fillStyle = '#ff9';
ctx.globalAlpha = 0.5; /*透明度50％にする*/
ctx.fillRect(170,50, 100,100);
ctx.globalAlpha = 1; /*透明度を100％に戻す（じゃ無いとコレ以降全部透明度50％になる）*/
```

三角形を描く（多角形を、パス（線）で描画する）

多角形は「パス（線）」で描きます。これは円弧や曲線も同じ。直線か曲線かの違い。

canvas での「パス（線）」の概念は、図形全体を「パス」、1辺（点と点を結んだ線）を「サブパス」と言うそうです。
三角形なら、3本の「サブパス」からできた「パス」というわけです。

多角形のパスの描き方は、

beginPath(); で、描画の開始を宣言
moveTo(x,y); で、サブパスの開始点をx,y座標（ピクセル）を指定
moveTo が開始点ってのがミソ。ペンで描くときも、まずは最初の点にペン先を移動させてから描き始めますよね。
lineTo(x,y); で、直線のサブパスを引く次の点のx,y座標（ピクセル）を指定
line は直線です。
closePath(); で、始点（moveTo(x,y); の座標）に直線を引いてサブパスを閉じる
closePath(); は直線で始点まで自動的に線を引きます。
strokeStyle または fillStyle で、線 or 塗りの色指定をする
＊四角形の場合と違ってココで色指定します。描画の前だから。
（サブパスの指定だけでは描画しません）
stroke(); または fill(); で、線 or 塗りで描画します
＊線と塗りは両方指定できます （サンプル参照）

サンプルの三角形のソースです。
（クリックでサンプルが別ウィンドウで開きます）

// 三角形＿（多角形はmoveTo(x, y)で始点、lineTo(x, y)で直線、closePath()で始点に戻る）
    ctx.beginPath();
    ctx.moveTo(428, 40);
    ctx.lineTo(368, 158);
    ctx.lineTo(496, 158);
    ctx.closePath();
    ctx.fillStyle = '#FFF';
    ctx.fill();
    ctx.strokeStyle = '#FF9999';
    ctx.stroke();

lineTo(x,y); で、2本しか直線を書いてないことに注目。（4〜5行目）
最後の1本は3行目の closePath(); で自動的に始点（moveTo(x,y); の座標）に向かって直線が引かれます。

円弧を描く

円弧は「arc」で表します。arc はそのまんま arc（円弧）です。
円の中心点と半径を決め、始点を決めて、終点を360°のところにしてグルッと1周すれば「円」、終点をどこか1点に決めれば「円弧」になります。

円弧の描き方は、

beginPath(); で、描画の開始を宣言
arc(x, y, radius, startAngle, endAngle, anticlockwise); で円弧を指定
strokeStyle または fillStyle で線 or 塗りの色指定をする（ここからは多角形の時と同じ）
stroke(); または fill(); で線 or 塗りで描画 ＊線と塗りは両方指定できます

2.の arc(x, y, radius, startAngle, endAngle, anticlockwise); について

x, y は、円の中心点の座標
radius は、円の半径
startAngle は、始点を角度で指定。ラジアン単位で指定
endAngle は、円弧の終点。同じくラジアン単位で指定
Angle（角度）に関しては、時計の3時にあたるところが 0 って決まっています。
anticlockwise は、円弧を描く方向。
anticlockwise は「反時計回り」のイギリス英単語（米英語で counterclockwise だって）
なので、この値が true だと「反時計回り」、false だと「時計回り」になります。
図説するとこんなかんじ ↓

度数をラジアン（radian）へ変換

普通、角度を表すときの単位は「度（°）」を使いますが、
<canvas>での円弧の描画には、この「ラジアン（rad）」を使います。
角度を書くときは「度数法からラジアンに変換」して書いてあげる必要があります。

1ラジアンは「180°/π」です。（ / は ÷ の意味）
π（パイ）は円周率（3.14159...）「半径 × 半径 × π = 円の面積」のアレ。
だから度数法に換算すると、1ラジアン = 約57.29578度。あら面倒くさい。

1ラジアン = 180度 ÷ π なので、1度 = 1ラジアン ÷ (180度 ÷ π) ってことですね。
1度 = 1ラジアン ÷ π分の180度（分数で考えます）ってことは、
1度 = 1ラジアン × 180度分のπ
（分数で割る時、分母と分子をひっくり返してかける、って習ったよね。懐かしい）

ってことで「1度 = 1ラジアン × π ÷ 180度」となります。「1度=1 × π ÷ 180」ね。

度数法からラジアンに変換
理屈はともかく「度数法からラジアンに変換」するのは、公式による指定をするだけなので、実はカンタンです。
公式では、π は数学関数の式「Math.PI」で表現するので
「度数 * Math.PI/180」 で書けばOK。（ * は × の意味）

例えば30度をラジアンで指定するなら「30*Math.PI/180」、
72度なら「72*Math.PI/180」。公式を覚えてしまえばカンタンですね。

90度の場合は「90*Math.PI/180」なので、「Math.PI/2」でOK。
180度の場合は「180*Math.PI/180」なので、「Math.PI」だけでOK。
360度の場合は「360*Math.PI/180」なので、「2*Math.PI」と書きます。
「Math.PI*2」と書いても同じ。（サンプルではこっちで書いてます）

サンプルの円弧のソースです。
（クリックでサンプルが別ウィンドウで開きます）

2つめの「半円＿塗り」は、
0度（時計で3時のところ）から、時計回り（=false）で180度（Math.PI）で描画しています。
最後の「円弧＿塗り」（昔のダイエーのマークみたいなヤツ）は、
20度（時計の4時くらい）のところから、反時計回り（=true）でグル〜っと「90度（時計の6時）」のところまで円弧を書いています。

どっちも「塗り（ fill() ）」の描画をしたので、終点から開始点に直線状に塗りの境界ができています。線（stroke() ）で描画すれば、円弧の線だけの表示になります。

// 円＿線（arc(x, y, radius, startAngle, endAngle, anticlockwise)）
    ctx.beginPath();
    ctx.arc(410, 105, 30, 0, Math.PI*2, false);
    ctx.strokeStyle = '#6DD900';
    ctx.stroke();
// 半円＿塗り
    ctx.beginPath();
    ctx.arc(450, 105, 30, 0, Math.PI, false);
    ctx.fillStyle = '#FFC926';
    ctx.fill();
// 円＿塗り＿透明度50％
    ctx.beginPath();
    ctx.arc(430, 135, 30, 0, Math.PI*2, false);
    ctx.fillStyle = 'rgba(255,153,153,0.5)';　/* rgba の a (alpha) で透明度を0.5 (50%) にしています */
    ctx.fill();
// 円弧＿塗り（正円じゃなく、途中で途切れた円弧です）
    ctx.beginPath();
    ctx.arc(580, 100, 60, 20*Math.PI/180, 90*Math.PI/180, true);
    ctx.fillStyle = '#DBA1AB';
    ctx.fill();

円弧の応用で扇型を作ろう

扇形のサンプルは、サンプルの後半にあります。
（クリックでサンプルが別ウィンドウで開きます）

まずはこの扇型を1コ作ってみます。

扇型の描き方は、

beginPath(); で、描画の開始を宣言
moveTo(x,y); で、円の中心点を開始点としてx,y座標（ピクセル）を指定
arc(x, y, radius, startAngle, endAngle, anticlockwise); で円弧を指定
これで、2.の開始点から startAngle まで、自動的に直線が引かれます
closePath(); で、パスを閉じる
これで、endAngle から 2.の開始点まで、自動的に直線が引いてパスを閉じます
strokeStyle または fillStyle で線 or 塗りの色指定をする（ここからは多角形のときと同じ）
stroke(); または fill(); で、線 or 塗りで描画 ＊線と塗りは両方指定できます

onload = function() {
    kihon();
    pie();
};

function pie() {
/* canvas要素 idで指定し、2Dコンテキストをゲット*/
    var cnvs2 = document.getElementById('canvas2');
    var ctx2 = cnvs2.getContext('2d');

/* まずは扇形の基本 */
    ctx2.beginPath();
    /* 円弧の中心点をパスの始点にする */
    ctx2.moveTo(100,100)
     /* 円弧を指定。パスの始点から円弧の始点まで自動的にパスが引かれる */
    ctx2.arc(100, 100, 60, 0, Math.PI/2, false);
    /* 円弧のパスを終わらせると、自動的に始点に線を引いてパスを閉じてくれる */
    ctx2.closePath();
    /* 色を指定して塗りつぶす */
    ctx2.fillStyle = '#FFCEBE';
    ctx2.fill();
}

扇型で円グラフを作ってみよう

円グラフののサンプルです。クリックで別ウィンドウで開きます。

作り方は、サンプル上のソースコードをご覧ください。
扇形の描き方の応用で、中心点が同じ扇型を並べているだけです。

＊このサンプルでは「テキスト」も描いてますが、テキストに関しては後日詳細。

次回予告

今回は、2Dコンテキストの取得から基本図形まででしたが、実際に図形を描いてみると基本がわかってきて、ちょっと楽しくなってきましたよ。

次回は曲線を描いてみます。
Illustrator などを使っている人はよく知ってる「ベジェ曲線」も Canvasで描くことができます。
線のスタイル（太さや、先端の形状など）の指定もやってみます。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2019-02-06（Wed）│
投稿日：2014-03-27（Thu）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿