カテゴリー

キーワード

 
> canvas要素で図形を描画(円...

canvas要素で図形を描画(円、直線、三角、矩形) 【HTML5 実践編】


2015 年 3 月 17 日 投稿    view: 16480
タグ:
このエントリーをはてなブックマークに追加

canvas要素(図形を描写)

こんにちは、WEBマーケティング部の杉尾です。


今回はcanvas要素を使って色々な図形を描画したいと思います。

基本的な説明は前回をご覧ください。⇒ canvas要素を紹介します(IE8にも対応) 【HTML5 実践編】



canvas要素で図形を描画する


円を描画

円は前回、参考ソースで見ていただきましたが、中身については詳しく紹介していませんでした。

前回とは少し違いますが、参考ソースからご覧ください。


参考ソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>canvas要素で描く円</title>
<!--[if lt IE 9]>
    <script type="text/javascript" src="js/excanvas.js"></script>
<![endif]-->
<script>
    onload = function() {
        myimage();
    }

    function myimage() {
        var circle = document.getElementById('circle');
        var ctx = circle.getContext('2d');
        ctx.beginPath();
        ctx.arc(150,150,150,0,Math.PI*2,true);
        ctx.stroke();
    }
</script>
</head>
<body>
    <div>
        <canvas id="circle" width="350" height="350"></canvas>
    </div>
</body>
</html>

図解

Canvasで円を描画


解説

6~8行目を書くことで、IE6~IE8にも対応します。
10行目、ページをロードしたとき、myimage()内に書かれた指定で描画を開始するという意味です。

15行目、circleというidのついた部分(25行目のHTML部分)に図形を描画するという意味です。
16行目、平面(図形)を描くという指定です。(※1)
17行目、ctx.beginPath();で描画サブパスを初期化しています。(※2)

18行目、arc(x, y, radius, startAngle, endAngle, anticlockwise);でどんな円を描くか指定します。 x,yは円の中心座標を示します。
radiusは円の半径です。
startAngleは始点の角度です。ラジアン単位で指定します。 startAngleの始点0は時計で言うと3時に当たる地点です。
endAngle は終点です。これもラジアン単位で指定します。


ラジアン単位
1ラジアン=180°÷πです。
これを逐一計算していくわけにはいかないので、πを表す『Math.PI』という数学関数を用いた公式を利用します。
『度数*Math.PI/180』というように書きます。(*は× /は÷の意味です)


上記ソースでは、startAngleが0の地点。endAngleは円なので、本来『360*Math.PI/180』ですが、分数の約分をして『2*Math.PI』です。
見やすいように『Math.PI*2』と逆に書いています。(※3) anticlockwiseは『反時計回り』の意味で、trueであれば『反時計回り』、falseであれば『時計回り』になります。

19行目、ctx.stroke();で円を線で描くという指定をしています。


※1 var circleやvar ctxの部分、変数名は何でも結構です。(varは続く文字が変数であることを示します)
この場合、circleは円を描くので、ctxはcontextの略で書きました。
contextは『文脈』という意味の英語ですが、IT用語では、プログラムの内部状態や置かれた状況、与えられた条件などを指すことが多いようです。

※2
以下の場合、beginPath() メソッドを実行して新たなサブパスを開始しなければなりません。
・直線や円弧を初めて描画するとき
・連続して円弧を描くとき
・連続しない直線を描くとき
・描画色を変更するとき
・線描画から塗り潰し描画、或いはその逆に変更するとき

※3
35°をラジアン指定する場合は『35*Math.PI/180』と書きます。
180°であれば『Math.PI』だけでも大丈夫です。
試してみましたが、計算が合っていれば、度数を180で割って書いても描画してくれるようです。


直線を描画

参考ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>canvasで描く直線</title>
<!--[if lt IE 9]>
    <script type="text/javascript" src="js/excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
onload = function() {
    line();
}
function line() {
    var line = document.getElementById('line');
    var ctx = line.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(20, 10);
    ctx.lineTo(100, 100);
    ctx.stroke();
}
</script>
</head>
<body>
    <h2>lineTo()</h2>
    <canvas id="line" width="150" height="150"></canvas>
</body>
</html>

図解

Canvasで直線を描画


解説

6~8行目を書くことで、IE6~IE8にも対応します。
10~12行目、ページをロードしたとき、line()内に書かれた指定で描画を開始するという意味です。
14行目 lineというidのついた部分(25行目のHTML部分)に図形を描画するという意味です。
15行目 平面(図形)を描くという指定です。
16行目 描画サブパスを初期化しています。
17行目 moveTo(x, y);指定の座標で新規のサブパスを生成しています。
18行目 lineTo(x, y);はサブパスがなければ(x,y)に対するサブパスを定義します。
上記ソース内ではmoveTo(x, y);でサブパスが指定されているので、そこからlineTo(x, y);で指定された地点に直線を引きます。
19行目 stroke();で図形を描画します。


三角形(多角形)を描画


参考ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>canvasで描く三角形</title>
<!--[if lt IE 9]>
    <script type="text/javascript" src="js/excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
onload = function() {
    angle();
}
function angle() {
    var angle = document.getElementById('angle');
    var ctx = angle.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(100, 10);
    ctx.lineTo(200, 100);
    ctx.lineTo(10, 200);
    ctx.closePath();
    ctx.stroke();
}
</script>
</head>
<body>
    <h2>lineTo()</h2>
    <canvas id="angle" width="200" height="200"></canvas>
</body>
</html>

【図解】

Canvasで三角形を描画


解説

6~8行目を書くことで、IE6~IE8にも対応します。
10~12行目、ページをロードしたとき、line()内に書かれた指定で描画を開始するという意味です。
14行目 angleというidのついた部分(27行目のHTML部分)に図形を描画するという意味です。
15行目 平面(図形)を描くという指定です。
16行目 描画サブパスを初期化しています。
17行目19行目 moveTo(x, y);で新規のサブパスを生成して指定された座標からlineTo(x, y);へ直線を引き、次のlineTo(x, y);へ直線を引きます。

20行目パスを閉じるという指定です。

21行目 サブパスに線を引くという指定です。

三角形以外の多角形を描画するにはlineTo(x,y);を増やしてください。


四角形

上記のやり方でもできますが、矩形を描画するには別のプロパティを利用できます。

こちらもまず参考ソースからご覧ください。


参考ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>canvasで描く四角形</title>
<!--[if lt IE 9]>
    <script type="text/javascript" src="js/excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
onload = function() {
    st1();
    st2();
};
/* fillRect()*/
function st1() {
    var square1 = document.getElementById('square1');
    var ctx = square1.getContext('2d');
    ctx.beginPath();
    ctx.fillStyle = "#ff0000";
    ctx.fillRect(30, 30, 90, 50);
}
/* strokeRect() */
function st2() {
    var square2 = document.getElementById('square2');
    var ctx = square2.getContext('2d');
    ctx.beginPath();
    ctx.strokeRect(30, 30, 90, 50);
}
</script>
</head>
<body>
    <h2>fillRect()</h2>
    <canvas id="square1" width="150" height="100"></canvas>
    <h2>strokeRect()</h2>
    <canvas id="square2" width="150" height="100"></canvas>
</body>
</html>

図解

Canvasで矩形を描画


解説

16、24行目で、それぞれどこに図形を描くか指定しています。
17、25行目 平面図形を描くという指定です。
18、26行目 描画サブパスを初期化しています。
19行目 塗りつぶし色を指定しています。
20行目 fillRect(x,y,width,height);で塗りつぶした矩形(長方形)を描きます。
x,yで矩形の左上端の座標を示します。
widthは横幅、heightで縦幅を指定します。
27行目 strokeRect(x, y, width, height)で枠線のみの矩形を描きます。
引数はそれぞれ fillRect()と同じ指定の仕方です。


ちなみに

複数のcanvas要素があるときはfunctionも分けた方が編集しやすいです。

こんな感じですね。


参考ソース

<script>
onload = function() {
    circle();
    square();
};
 
function circle() {
     /* circle()で描画したい図形のソース */
}
function square() {
    /* square()で描画したい図形のソース */
}
</script>

まとめ

2回にわたって、Canvasについての説明をさせていただきました。
Canvasにはまだまだ色々なプロパティ(属性)がありますので、またどこかで紹介したいと思います。


最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事