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

最終更新日:2019年02月06日  (初回投稿日:2014年03月27日)

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

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

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

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

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>要素を使います。

<script>要素の詳細は「[44] scriptでスクリプトを読み込む or HTMLに直接書く」をご覧ください。

サンプルでは、ソースコードが見やすいように 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本の「サブパス」からできた「パス」というわけです。

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

  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 塗りで描画します
    *線と塗りは両方指定できます (サンプル参照)

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

// 三角形_(多角形は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点に決めれば「円弧」になります。

円弧の描き方は、

  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ラジアン = 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コ作ってみます。

扇型の描き方は、

  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 塗りで描画 *線と塗りは両方指定できます
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 が使えます。
初心者が始めやすいサーバだと思います。

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

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2023/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
Profile

yuki★hata

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

メールフォームはこちら

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