html5入門
canvasとは
Canvasとはhtml5で新規に指定されたタグでJavaScriptを使い図を描くことができます。

サンプルコードの表示結果

ソースコード

<!-- html5 タグで canvassample1 を呼び出し、表示サイズを決める -->
<canvas id="canvassample1" width="140" height="140"></canvas>
<script type="text/javascript">
/*draw1メソッドを呼ぶ*/
onload = function() {
draw1();
};
function draw1() {
/*canvassample1を取得する*/
var canvas = document.getElementById('canvassample1');
/*canvasの存在チェックと未対応ブラウザの対処*/
if ( ! canvas || ! canvas.getContext ) {
return false;
}
/* 2Dコンテキスト */
var ctx = canvas.getContext('2d');
/* コンテキスト指定開始 */
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(120, 20);
ctx.lineTo(120, 120);
ctx.lineTo(20, 120);
/* 指定終了 */
ctx.closePath();
/* コンテキストを描く */
ctx.stroke();
}
</script>

IEの場合

今の所、Internet ExplorerはCanvasに対応していません。そのためGoogleが提供しているExplorerCanvasというJavaScriptライブラリをダウンロードして指定する必要があります。
ダウンロード先：ExplorerCanvas

指定方法：
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

Copyright html5入門
All Rights Reserved.
html5入門

canvasとは

Canvasとはhtml5で新規に指定されたタグでJavaScriptを使い図を描くことができます。

サンプルコードの表示結果

ソースコード

<!-- html5 タグで canvassample1 を呼び出し、表示サイズを決める -->
<canvas id="canvassample1" width="140" height="140"></canvas>
<script type="text/javascript">
/*draw1メソッドを呼ぶ*/
onload = function() {
draw1();
};
function draw1() {
/*canvassample1を取得する*/
var canvas = document.getElementById('canvassample1');
/*canvasの存在チェックと未対応ブラウザの対処*/
if ( ! canvas || ! canvas.getContext ) {
return false;
}
/* 2Dコンテキスト */
var ctx = canvas.getContext('2d');
/* コンテキスト指定開始 */
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(120, 20);
ctx.lineTo(120, 120);
ctx.lineTo(20, 120);
/* 指定終了 */
ctx.closePath();
/* コンテキストを描く */
ctx.stroke();
}
</script>

IEの場合

今の所、Internet ExplorerはCanvasに対応していません。そのためGoogleが提供しているExplorerCanvasというJavaScriptライブラリをダウンロードして指定する必要があります。
ダウンロード先：ExplorerCanvas

指定方法：
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

canvasとは：html5の特徴