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での表示結果
以 上