キャンバスを使う

キャンバスをつっかって絵を描こう

キャンバスようのHTMLは

HTMLを準備しよう
canvasで図形を描く ←準備ファイル
短いから書いておくと、こんなHTML。

 $<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvasで図形を描く</title>
</head>
<body onLoad="test()">
<h2>Canvasで図形を描く</h2>
<canvas id="sample"></canvas>
</body>
</html>$

おや変なものがある。

 $<body onLoad="test()">$

これはbodyタグがonload 読み込まれたとき、tesut()っていうJavaスクリプトをしなさいってこと。
ボタンをつけて、ボタンが押されたとき　test()しなさいとか色々出来ますね。

 $<input type="button" value="押してね" onclick="test()">$

なお、実行するスクリプトはわかりやすい名前にして下さい。

キャンパスを作ろう

キャンバスタグはそこへいろいろな絵を描くことが出来ます。
絵を移動することも出来ます。
まずキャンパスタグを書きましょう。

 $<canvas id="sample></canvas>$

これでいいのですが、まだ使えないブラウザもあるかもしれません。

 $<canvas id="sample>図形を表示するには新しいブラウザが必要です。</canvas>$

と書いておくと、キャンバスを使えない古いブラウザには【図形を表示するには新しいブラウザが必要です。】と表示されます。
エクスプローラもエッジに変わっていくでしょうから必要なくなるでしょう。
でもこのままではどこがキャンバスか分かりません。
そこで、とりあえず

 $<canvas id="sample" style="background-color:yellow">
</canvas>$

と黄色に塗っておきましょう。

現在の大きさはデフォルトの大きさです。
大きさも指定しましょう。

 $<canvas id="sample" style="background-color:yellow" width="150" height="150">
</canvas>$

とすると、大きさが変わります。

これでキャンバスが出来ました。

図形を書いてみよう

まず四角形を書いてみましょう。
スクリプトは、今度は、ヘッドの中に書いてみましょう。

 $<head>
<meta charset="UTF-8">
<title>canvasで図形を描く</title>
<script type="text/javascript">
    ここに図形の表示を書きます。
</script>
</head>$

まず

 $<script>
</script>$

として、ここへスクリプトを書いていきます。
それから、その中に、

 $<script>
function test() {
  let canvas = document.getElementById('sample');
  if (canvas.getContext) {
    //下にある１を書く
    //左から50上から40の位置に、幅20高さ30の四角形を描く
    //下にある２を書く
  }
}
</script>$

と書いていきます。
まず、document.getElementById　で
sanple とID名をつけられたキャンバスをつかまえて、
canbas という名前のインスタンスにします。
次の、　if (canvas.getContext) {} は、もし canvas.getContext がちゃんとあればという意味のようです(==true　としてみたけどダメ)

 $function draw() {
  let canvas = document.getElementById('rectangle');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  let cvs = canvas.getContext('2d');$

と書いてあるページもありました。{}の中に様々書くよりかっこいいですけれど、試してないです。

2次元を書く

これが１です。

 $let cvs = canvas.getContext('2d');$

2d というのは2次元。つまり表面の図形です。
これを書けるようにするのがこの命令です。
コンテキストを得るという意味ですが、コンテキストとは何でしょう。
コンテキストは【状況】という意味で、最初はまっさら。それに対して、線を書くとか円を描くという【新しい状況】を付け加えることで状況が変わって図形が書ける、という風に考えましょう。

四角を書く１

これが２です。

 $//ここに具体的な描画内容を指定する
    cvs.fillRect(50,40,20,30);$

fillrectのfillは塗りつぶし、rectは四角形です。
原点は左上です。数学のように左下ではありません。
左上が（0,0）です。
そこから右へ50ピクセル、下へ40ピクセルが図形の開始点です。
次の20，30はどういう意味か、数字をかえて考えましょう。

四角を書く２

塗りつぶさない四角を書く。

 $//色を指定する
    cvs.strokeStyle = 'rgb(00,00,255)'; //枠線の色は青
    //左から200上から80の位置に、幅100高さ50の四角の枠線を描く
    cvs.strokeRect(80,20,100,50);$

strokeStyleのストロークは「水泳で腕で水を１かいかくこと」等に使います。
ここでは鉛筆で線を1回書いたくいの意味と考えましょう。
そのスタイルのrgb　つまりレッド、グリーン、ブルーを指定しているわけです。

strokeRect(80,20,100,50);　は線で四角形をかくという意味です。

円を書く１

 $cvs.fillStyle = 'rgb(255,00,00)'; //塗りつぶしの色は?

    //左から150上から75の位置に、半径60の半円を反時計回り（左回り）で描く
    cvs.arc(150,85,40,Math.PI*1,Math.PI*1.9,true);
    cvs.fill();$

fillstyle の意味を考えましょう。
rgb(255,0,0)花に色でしょう。
円は、cvs.arc(150,85,40,Math.PI*1,Math.PI*1.9,true);
最初の150,85は円の中心の位置です。　0,0 にしてみましょう。どうなる？
次の40は何だろう。数字を変えてみましょう。
次のMath.PI*1,Math.PI*1.9は書き始めの角度と書き終わりの角度です。
左端が、Math.PI*0,つまり0ラジアンで0度です。
右端が、Math.PI*1,つまりπラジアンで190度で、左回りではかります。
ラジアンというのは、角度を、半径１の円の回りの長さで表したものです・・・・
２πラジアンが１８０度、直径×π　です。
他にもいろいろな千お書き型があります。

多角形を描く

 $/* rectangle */
    cvs.beginPath(); /* 図形を描き始めることを宣言 */
    cvs.moveTo(80, 50); /* 図形の描き始めを移動 */
    cvs.lineTo(90, 50); /* 図形の線の終わりを決める */
    cvs.lineTo(100, 100);
    cvs.lineTo(50, 100);
    cvs.closePath(); /* 描いた線を閉じる */
    cvs.stroke(); /* 描いた図形を線で表示させる */$

]]>
できあがったHTMLがこれです(head内にスクリプトがある例)

 $<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvasで図形を描く</title>
<script type="text/javascript">
<!--
function test() {
  //描画コンテキストの取得
  let canvas = document.getElementById('sample');
  if (canvas.getContext ) {
    let cvs = canvas.getContext('2d');
    //ここに具体的な描画内容を指定する
    //左から20上から40の位置に、幅50高さ100の四角形を描く
    cvs.fillRect(50,40,20,30);
    //色を指定する
    cvs.strokeStyle = 'rgb(00,00,255)'; //枠線の色は青
    //左から200上から80の位置に、幅100高さ50の四角の枠線を描く
    cvs.strokeRect(80,20,100,50);
      
      
    cvs.fillStyle = 'rgb(255,00,00)'; //塗りつぶしの色は赤  
    //左から150上から75の位置に、半径60の半円を反時計回り（左回り）で描く
    cvs.arc(150,85,40,Math.PI*1,Math.PI*1.9,true);
    cvs.fill();
      
      /* rectangle */
    cvs.beginPath(); /* 図形を描き始めることを宣言 */
    cvs.moveTo(80, 50); /* 図形の描き始めを移動 */
    cvs.lineTo(90, 50); /* 図形の線の終わりを決める */
    cvs.lineTo(100, 100);
    cvs.lineTo(50, 100);
    cvs.closePath(); /* 描いた線を閉じる */
    cvs.stroke(); /* 描いた図形を線で表示させる */    
      
  }
}
//-->
</script>
</head>
//HTMLが読み込み終わったら,スクリプトtext()を実行する
<body onLoad="test()">
<h2>Canvasで図形を描く</h2>
<canvas id="sample" style="background-color:yellow;">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>
</body>
</html>$

]]> できあがったHTMLがこれです(body内にスクリプトがある例)

 $<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">  
    <title>画像を動かす</title>
    <style>
    	canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>
    
<h2>Canvasで図形を描く</h2>
<canvas id="myCanvas" width="480" height="320"></canvas>
    
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    //ここに具体的な描画内容を指定する
    //左から20上から40の位置に、幅50高さ100の四角形を描く
    //色を指定する
    ctx.strokeStyle = 'rgb(00,00,255)'; //枠線の色は青
    //左から200上から80の位置に、幅100高さ50の四角の枠線を描く
    ctx.strokeRect(80,20,100,50);
      
      
    ctx.fillStyle = 'rgb(255,00,00)'; //塗りつぶしの色は赤  
    //左から150上から75の位置に、半径60の半円を反時計回り（左回り）で描く
    ctx.arc(150,85,40,Math.PI*1,Math.PI*1.9,true);
    ctx.fill();
      
      /* rectangle */
    ctx.beginPath(); /* 図形を描き始めることを宣言 */
    ctx.moveTo(80, 50); /* 図形の描き始めを移動 */
    ctx.lineTo(90, 50); /* 図形の線の終わりを決める */
    ctx.lineTo(100, 100);
    ctx.lineTo(50, 100);
    ctx.closePath(); /* 描いた線を閉じる */
    ctx.stroke(); /* 描いた図形を線で表示させる */ 
</script>    
</body>
</html>$

]]> 参考サイト ←スクリプト参考サイト。
参考サイト ←この中の図形を描くところ(canvas)を見てみましょう。

課題

上の図形を自分の好きな形に書き換えて下さい。
sub1.html へのリンク　←これができあがり資料
b4.ip へのリンク←これを解凍すればほぼできあがり
次の問題へ進む

ジャバスクリプトの4 キャンバス