HTML5のcanvasを使ってみたーJavaScriptをどこに書く？ #JavaScript

canvasを使ってみた

初めてHTML5のcanvasを使ってみました．
理由は，簡単な画像を表示したかったのですが，画像ソフトで作るのも面倒なので，とりあえず試してみたというものです．結果は，うまくいきました．

JavaScriptを書く場所

ここで，迷ったのは，JavaScriptを書く場所です．
私は，HTML文書で数式を表示するのにMathJaxを使っていますが，文書作成時や自分のMac上での作業では，MacのストレージにあるMathJaxを読みに行くようにしていますが，Webサイトにアップする時は，cdn.mathjax.orgに読みに行くようにしています．また文書作成時は，ヘッダーやフッダー，装飾にはこだわりませんが，サイトにアップするときはこれらを付け足すようにしています．
このため，<body> </body> の間を読み取って，これにヘッダーやフッダーを付け足すプログラムを作って処理しています．

ここで，canvasについてネットで調べてみましたが，内容を示すJavaScriptは <head> </head> の間に書いている事例が多いように思いました．しかし，上記処理を行うことを考えると，canvasがあるページのみ，canvas用のJavaScriptを含む違うヘッダーにするのはめんどうくさい．それに妙に長いヘッダーはあまりかっこよくない（個人的趣味）．
そこで，色々検索してみると，一般的にJavaScriptは　</body> の手前に書くのがいいらしい．

参考サイト
http://wp-p.info/tpl_rep.php?cat=js-biginner&fl=r2

そこで，以下のHTML文書を作り試したところ，うまく表示できました．
私のMac上のSafariでの表示結果は，画像に示すとおりです．

テスト用HTMLの文書

<!DOCTYPE html>
<html>
<head>
<script src="/Users/kk/mathjax/MathJax.js?config=TeX-AMS_HTML">
<!--<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">-->
MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\$","\\$"]] } });
</script>
</head>
<body>

<h4>点と直線の距離</h4>
<p>点$(x_g,z_g)$から直線$z=a'*x+b'$への最短距離となる直線上の点$(x_x,z_z)$は以下のとおり求められる．</p>
<div class="eq">
\begin{equation}
\begin{cases}
&x_x=\cfrac{x_g+z_g*a'-a'*b'}{1+a'*a'} \\
&z_z=a'*x_x+b'
\end{cases}
\end{equation}
</div>

<canvas id="sample1" width="170" height="150" style="background-color:transparent;">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>

<p>四角形要素は4節点で構成されるが，4点を通る平面は空間中に設定できない．
このため，四角形要素を構成する節点を，半時計回りに4組の3点に分けて考え，ある圧力を示す点を特定する．
ここで要素節点番号を(1,2,3,4)とすれば，三角形を構成できる節点の組み合わせは，(1,2,3)，(2,3,4)，(3,4,1)，(4,1,2)となる．</p>

<canvas id="sample2" width="170" height="150" style="background-color:transparent;">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>

<script type="text/javascript">
onload=function(){
    test1();
    test2();
}
function test1(){
  var canvas = document.getElementById('sample1');
  if (canvas.getContext) {
    var context = canvas.getContext('2d');
    //左から50上から50の位置に、幅70高さ50の四角形を描く
    context.strokeRect(50,50,70,50);
    context.fillStyle = 'rgb(0,0,0)';
    context.beginPath()
    context.moveTo(50,50);
    context.lineTo(120,100);
    context.moveTo(50,100);
    context.lineTo(120,50);
    context.stroke();
    context.font="16px sans-serif"
    context.textAlign="center"
    context.fillText( '1', 45, 115 );
    context.fillText( '2',125, 115 );
    context.fillText( '3',125,  45 );
    context.fillText( '4', 45,  45 );
   }
}
function test2(){
  var canvas = document.getElementById('sample2');
  if (canvas.getContext) {
    var context = canvas.getContext('2d');
    //左から20上から20の位置に、幅80高さ60の四角形を描く
    context.strokeRect(20,20,80,60);
    context.fillStyle = 'rgb(0,0,0)';
    context.beginPath()
    context.moveTo(20,20);
    context.lineTo(100,80);
    context.moveTo(20,80);
    context.lineTo(100,20);
    context.stroke();
    context.font="32px sans-serif"
    context.textAlign="center"
    context.strokeText( 'Mail', 60, 50 );
   }
}
</script>

</body>
</html>

Safariでの表示結果

以　上