HTMLとCSSとJavaScriptとPHP

canvas

canvas要素 1.直線を引く

canvas要素はscriptによって画像が扱える要素です。

HTMLにcanvas要素を入れる


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>canvas要素</title>
<script type="text/javascript" src="canvas.js"></script>
<style>canvas{border:solid 1px #666666;}</style>
</head>
<body>
<p>canvas要素を使って線を引く</p>
<canvas id="newcanvas" width="210" height="300"></canvas>
</body>
</html>

canvasがわかりやすいようにCSSで枠線を表示しています。

head要素内にJavaScriptへのリンクを記述しています。title要素の下の行のscript要素です。

JavaScript(API)を利用して直線を引く


window.onload=canvas_line;
function canvas_line() {
    /* <canvas>要素のノードオブジェクトの取得*/
    var canvas=document.getElementById('newcanvas');
    /* 未対応の場合処理終了 */
	if(!canvas.getContext){
		return false;
	}
    /* 描画用のオブジェクトを取得する */
    var cs=canvas.getContext('2d');
    /* 直線を描く */
	cs.beginPath();             // パスのリセット
	cs.lineWidth = 5;           // 線の太さ
	cs.strokeStyle="#ff0000";   // 線の色
	cs.moveTo(10,10);           // 開始位置
	cs.lineTo(200,180);         // 次の位置
	cs.stroke();                // 描画
}
  1. window.onload=canvas_line;でHTMLファイルが読み込まれた後に線を引く関数を実行するようにします。
  2. var canvas=document.getElementById('newcanvas');canvas要素にid属性をつけているのでそのidでcanvas要素のノードオブジェクトを取得します。
  3. getContext('2d')はcanvas要素のノードオブジェクトからコンテキストを取得します。2dは現在のところ他を指定することはできません。一部可能なUAもあるようですが。W3C参照
  4. beginPath();でパスをリセットします。W3C参照
  5. lineWidthは線の太さを設定します。0より大きい正の数値を設定します。初期値は1.0ですから設定しない場合は1pxの太さとなります。W3C参照
  6. strokeStyleは線の色を指定します。CanvasGradient(グラデーション) や CanvasPattern(画像の敷詰め) を取ることも可能です。初期値は#000000となるので設定しない場合は黒になります。W3C参照
  7. moveTo(x, y)パスの初期の座標を設定します。W3C参照
    座標の基準はcanvas要素の左上を(0,0)として(x方向,y方向)と指定します。W3C参照
  8. lineTo(x, y)前のパス位置から直線でつなぎます。W3C参照
  9. stroke()はパスを描画します。W3C参照

5から8の順序は不同です。コメントが日本語で入っていますのでjavaScriptファイルの文字コードはHTMLファイルと同じものにしておいてください。

上記サンプルを開くIE8以下では期待したものは描かれません。

IEでcanvas要素が同じように動作するようにする


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>canvas要素</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="canvas.js"></script>
<style>canvas{border:solid 1px #666666;}</style>
</head>
<body>
<p>IEでcanvas要素が同じように動作するようにする</p>
<canvas id="newcanvas" width="300" height="300"></canvas>
</body>
</html>
  1. Internet Explorerの8以下ではHTML5の新しい要素自体が認識されません。
  2. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>googleがJavaScriptでIEに対してHTML5要素を作成するライブラリを公開しています。http://html5shiv.googlecode.com/svn/trunk/html5.jsにリンクします。そのライブラリを読み込みます。ライブラリ内でCSSによるブロックレベル化や印刷時の設定などもしているようです。ライブラリは全体がコメント扱いになっており、IEのみが理解する条件コンパイルが使用されているのでIE以外のブラウザには影響ありません。
  3. しかし、一般的にはHTML内でバージョンベクタという手法でIEのみが読み込めるようにしている場合が多いようです。<!--[if lt IE 9]>から<![endif]-->無駄なライブラリの読み込みを避けるほうがよいでしょうから。
  4. この状態ではcanvas要素は認識できるようですが、描画のためのAPIがまだ利用できません。これもgoogleがexplorercanvasというライブラリを公開しています。<script type="text/javascript" src="excanvas.js"></script>今度はダウンロードしてサーバーにおいてリンクして使用する形式です。
  5. canvas要素を使うだけなら2のhtml5ライブラリはなくても大丈夫です。

上記サンプルを開く