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

<canvas>要素に基本的な図形を描いてみましょう。

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

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

本日のINDEX
  1. canvas の準備
    1. HTML上に<canvas>を作っておきます
    2. JavaScriptの実行のタイミングとfunction
    3. 複数のfunctionの指定
    4. 2Dコンテキストの取得
  2. 四角形を描く
    1. canvasでの色指定について(線や塗りの色、透明度)
  3. 三角形(多角形をパスで)を描く
  4. 円弧を描く
  5. ラジアンとは(canvasでの角度の単位)
  6. 扇形を描く
  7. 円グラフを描く(扇形の応用)

まずは、<canvas>要素を作っておきます

<canvas>要素をHTML上に作っておきます。
width, height属性でサイズ指定し、id属性で名前を付けておきます。サンプルでは canvas1 にしました。
<canvas>と</canvas>の間に、未対応ブラウザ用の代替コンテンツを入れてもOK。
<canvas>に対応したブラウザでは代替コンテンツは表示されません。

<canvas id="canvas1" width="678" height="200"></canvas>

これで、透明な四角いキャンバスが画面上にできます。
この<canvas>の左上の角が描画の基準点 (x=0, y=0) になるって覚えておこう。

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

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

実行のタイミング は、
普通にグラフィックスを表示するだけなら「onload = function()」を使います。
これは、このHTMLファイルがロードされたタイミングで実行、という指令。
HTML要素をクリックした時に実行したければ、HTML要素に「onclick="関数名()"」で指定します。これは後日詳細。

実行するfunction(関数)は、
function 関数名() { } で、{ } の中に、図形などのグラフィックス描画する指定を書きます。
関数名は、なんでも好きな名前でOK。サンプルでは kihon にしています。

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

HTMLファイルに JavaScript を書く場所は、
サンプルではソースが1回で見られるように HTML ファイルの<head>部分にジカに書いてますが、
実際には外部ファイル「○○○.js」にして、<head>で読み込んだほうがイイです。
いずれにしても、<script>要素を使います。
<script>要素の詳細は「[44] scriptでスクリプトを読み込む or HTMLに直接書く」をご覧ください。

外部 js ファイルにするなら、
上の<script>〜</script>内の内容をプレーンテキストで、適当な名前をつけて保存(文字エンコードは UTF-8)。拡張子は「.js」にして、下記のように<head>内で呼び出します。

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

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

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

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

<script>
onload = function() {
    kihon();
    pie();
};

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

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

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

まず、<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」を使って、「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 での色指定について

  • 線の場合は strokeStyle = ' '
  • 塗りの場合は fillStyle = ' '

★色指定の方法はCSSと同じ
#ff0000、red、rgb(255,0,0)、rgb(100%,0%,0%)、rgba(255,0,0,1) などの CSSの指定が全部
使えます。(グラデーションの指定については後日詳細(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本の「サブパス」からできた「パス」というわけです。

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

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

サンプルの三角形の
ソースです。

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

/* 三角形_(多角形は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();

円弧を描く

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

円弧の描き方は、

  1. beginPath(); で、描画の開始を宣言
  2. arc(x, y, radius, startAngle, endAngle, anticlockwise); で円弧を指定
  3. strokeStyle または fillStyle で線 or 塗りの色指定をする(ここからは多角形の時と同じ)
  4. 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ラジアン(57.229578...度) = 180度 ÷ π なので、1度 = 1ラジアン ÷ (180度 ÷ π) ってことですね。
1度 = 1ラジアン ÷ π分の180度(分数で考えます)ってことは、
1度 = 1ラジアン × 180度分のπ
(分数で割る時、分母と分子をひっくり返してかける、って習ったよね。懐かしい)

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

(で、ちなみに、1度をラジアンに換算すると、1度 = 約0.01745ラジアンになります)

理屈はともかく「度数法からラジアンに変換」するのは、公式による指定をするだけなので、実はカンタンです。
公式では、π は数学関数の式「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。
ということは、180度=πラジアンか。計算すると、180×0.01745=3.141になるのでそのとおり! へ〜。
360度の場合は「360*Math.PI/180」なので、「2*Math.PI」と書きます。
(「Math.PI*2」と書いても同じ。サンプルではこっちで書いてます。見やすいから)
★計算が合ってれば、どう書いてもOK。180度 = Math.PI を念頭に!

サンプルの円弧のソースです。

  • 2つめの「半円_塗り」に注目。
    0度(時計で3時のところ)から、時計回り(=false)で180度(Math.PI)で描画していますね。
  • 最後の「円弧_塗り」(昔のダイエーのマークみたいなヤツ)は、
    20度(時計の4時ちょっと前くらい)のところから、反時計回り(=true)でグル〜っと「90度(時計の6時)」のところまで円弧を書いています。
  • どっちも「塗り( fill() )」の描画をしたので、終点から開始点に直線状に塗りの境界ができています。これって Illustrator などと同じですね。線が引かれたわけではないんですよ。
    線(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コ作ってみます。

扇型の描き方は、

  1. beginPath(); で、描画の開始を宣言
  2. moveTo(x,y); で、円の中心点を開始点としてx,y座標(ピクセル)を指定
  3. arc(x, y, radius, startAngle, endAngle, anticlockwise); で円弧を指定
    これで、2.の開始点から startAngle まで、自動的に直線が引かれます
  4. closePath(); で、パスを閉じる
    これで、endAngle から 2.の開始点まで、自動的に直線が引いてパスを閉じます
  5. strokeStyle または fillStyle で線 or 塗りの色指定をする(ここからは多角形のときと同じ)
  6. stroke(); または fill(); で、線 or 塗りで描画 *線と塗りは両方指定できます
<script>
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();
}
</script>

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

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

この作り方は、サンプルのソースを見ればすぐわかるはずですので、
説明不用です。上の扇形の応用で、中心点が同じ扇型を並べているだけ。

*ここではテキストも描いてますが、テキストに関しては後日詳細。

次回予告

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

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

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.