2016.09.30
WEB

【HTML5を知ろう】 Canvasで図形を描く！

おはようこんにちはこんばんは。

最近はゲームの世界で王様を玉座に戻すためにあちこち冒険してます。
“みたらし”でございます(｀・Д・)

第3回目の今回は王様の倒し方について…

をやるのはさすがに怒られてしまうので、
前回の続きでHTML5について探っていきましょう(・д・)

1 Canvasで図形を描く！
2 まずは土台を作る！
3 長方形を描く！
4 円を描く！
5 点を描く！
6 直線・曲線を描く！
7 完成！

Canvasで図形を描く！

今回は前回最後にちょっと書きました、
HTML5でお絵かきができるCanvasについてやっていこうと思います！

ちなみに”カンバス”じゃなくて”キャンバス”ですよ(・д・｀)

Canvasはコードで書いた内容をブラウザが処理して表示してくれるので、
画力がみたらしさんみたいに低くても安心だ！

ただし、HTMLとJavaScriptを組み合わせた物なので、
HTMLはともかくJavaScriptが全く分からない状態だと難しいかも…

とりあえずがんばってやっていきましょー(｀・ω・´)

まずは土台を作る！

Canvasで何かを表示するにあたり、
表示する場所がないとできないのでまずそれを用意します。


<!DOCTYPE html>
<html>
<head>
 
</head>
<body>

【HTML5を知ろう】 Canvasで図形を描く！

<div>
    <canvas width="800" height="500" id="sumple" style="background-color:yellow;"></canvas>
</div>

</body>
</html>

上記のような前回までの物をちょっと改良した物を用意して下さい。
早速Canvasタグが使われているけど、これは何かを描くための場所を用意しているだけです。
例えるならスケッチブックの1ページをここに用意した。という感じですね(｀・ω・)

表示するとこんな感じになります。

Canvas図形01

黄色い四角ができました！
タグの属性に”style”をいれて、指定した領域の色を変更しています。
全部白だとCanvasでどの範囲で図を描けるかわからなくなってしまうので、
用意した領域の色を変えてわかりやすくしています。

それではこの黄色い四角の中にCanvasで図形を描いていきましょう！

長方形を描く！

まずは長方形を作ってみます。
先程作成したファイルの<head>から</head>
の間に下記コードを追加して下さい。


<script>
    function test() {
        var canvas = document.getElementById('sumple');
        
        var square = canvas.getContext('2d');
        
        square.beginPath();
        square.strokeRect(100, 100, 300, 200);
    }

    onload = function() {
        test();
    };
</script>

この状態で表示をすると…

Canvas図形02

長方形ができました！

document.getElementById で図形を描く領域がどこなのかを指定しています。

getContext(‘2d’) でオブジェクトっていうのを指定するみたいなのですが、
現在は’2d’しか設定できないようなので
あまり気にしなくていいと思います(＝ω＝)

beginPath() は次から指示する内容で新しく書いてね
っていう作戦開始命令(＞Д＜)ゝ

strokeRect(100,100,300,200); で領域内の左から100、
上から100の地点からさらに右に300、
下に200にある地点に届くように四角を作ってねという意味です(｀・Д・)

長方形を作ることができたので、次は円を作ってみましょう！

円を描く！

では先程<head>の中に書いた内容を、下記のように変更してみて下さい。


<script>
    function test() {
        var canvas = document.getElementById('sumple');
        
        var square = canvas.getContext('2d');
        var circle = canvas.getContext('2d');
        
        square.beginPath();
        square.strokeRect(100, 100, 300, 200);
        
        circle.beginPath();
        circle.arc(150, 60, 40, 0, Math.PI*2, true);
        circle.stroke();
    }

    onload = function() {
        test();
    };
</script>

この状態で表示をすると…

Canvas図形03

円が増えました！

square 変数は長方形で使ってしまったので、
新たに circle 変数を用意しています。

円は circle.arc(150, 60, 40, 0, Math.PI*2, true); で作っているのですが、
ちょっと難しい…
『、』で区切られた左から2つ目までが中心位置、3つ目が半径、
4つ目が弧を描き始める位置で、5つ目が終了位置、
6つ目が弧を描く向きです。

角度指定したりといろいろ難しいのですが、
下記サイトが図解もあり非常にわかりやすいので気になる方は参考にしてみて下さい！(｀・ω・´)
みたらしもお世話になりました！

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

また、四角の時は必要なかったのですが、
stroke() でここまでの内容で描いてねっていう命令がないと表示されないので注意です(・д・｀)

では次に、円に中心点を付けてみましょう。

点を描く！

円の中心点が表示されていないと落ち着かないので、
円に中心点をつけてみます。

厳密的に『・』のような点を作ることはできないので、
小さな円の中を塗りつぶす形で作成します。

先程のコードを下記内容に変更してみて下さい。


<script>
    function test() {
        var canvas = document.getElementById('sumple');
        
        var square = canvas.getContext('2d');
        var circle = canvas.getContext('2d');
        var point = canvas.getContext('2d');
        
        square.beginPath();
        square.strokeRect(100, 100, 300, 200);
        
        circle.beginPath();
        circle.arc(150, 60, 40, 0, Math.PI*2, true);
        circle.stroke();
        
        point.beginPath();
        point.arc(150,60,2,0,Math.PI*2,true);
        point.fill();
    }

    onload = function() {
        test();
    };
</script>

この状態で表示をすると…

Canvas図形04

円に黒い中心点ができました！

1つ前の円の時と同じで、今回は小さな円を作っているだけですが、
この内容で描いてねっていう指示が
stroke() から fill() に変わっています。
stroke() だと線が引かれ、fill() だと中が塗りつぶされたものができます。
意外と簡単！

では次に、この円の中心から線を引いて四角の周りを1週してみましょう。

直線・曲線を描く！

それでは、先程のコードを下記のように変更してみて下さい。


<script>
    function test() {
        var canvas = document.getElementById('sumple');
        
        var square = canvas.getContext('2d');
        var circle = canvas.getContext('2d');
        var point = canvas.getContext('2d');
        var path = canvas.getContext('2d');
        
        square.beginPath();
        square.strokeRect(100, 100, 300, 200);
        
        circle.beginPath();
        circle.arc(150, 60, 40, 0, Math.PI*2, true);
        circle.stroke();
        
        point.beginPath();
        point.arc(150,60,2,0,Math.PI*2,true);
        point.fill();
        
        path.beginPath();
        path.moveTo(150,60);
        path.lineTo(400,60);
        path.quadraticCurveTo(440, 60, 440, 100);
        path.lineTo(440,300);
        path.quadraticCurveTo(440,340,400,340);
        path.lineTo(100,340);
        path.quadraticCurveTo(60,340,60,300);
        path.lineTo(60,100);
        path.quadraticCurveTo(60,60,100,60);
        //path.lineTo(150,60);
        path.stroke();
    }

    onload = function() {
        test();
    };
</script>

結構長くなってきました！
元の位置に戻ってしまうとわかりにくくなってしまったので、
最後の一本をコメントアウトしています。

表示して確認してみましょう！

Canvas図形05

円の中心から線が引かれ、角が丸くなる形でぐるーっとしています。
一筆書きみたいな感じで線が引かれていますね(・д・｀)

簡単に説明すると下記のような感じです。
path.moveTo(150,60); でこの地点から次の地点まで移動しつつ書いてねという命令。
path.lineTo(400,60); はこの地点まで線を引いてねという命令。
path.quadraticCurveTo(440, 60, 440, 100); で(440, 60)の地点を作用点にして、
(440, 100)の地点まで曲線を引いてねという命令です。

そしてこの直線を描く、曲線を描く、ということを繰り返して、
長方形の周りを囲うようにしています。

あまりよくわからない方は、コメントアウト部分の上へ一つずつ、
更にコメントアウトして表示確認することで流れがよくわかるかと思います。
紙に図を描いて、各箇所の座標を計算して書いてみるのも良いかと思います。
(みたらしは自分で図を描いて長さを計算していました。これがまた楽しい)