HTML5入門その1-canvas | なんとか研究室

HTML5で実装されているcanvasを実行してみましょう．
以下を別の名前で作成し，保存してください．

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>無題ドキュメント</title>
</head>

<body>

 <canvas id="myCanvas" width="200" height="200"
style="border:1px solid #000000;"><!--キャンバスを設定，名前はmyCanvas　幅200，高さ200，境界線hは１ピクセルの1本線で黒色-->
</canvas>

<script type="text/javascript">
var c = document.getElementById("myCanvas");//入れ物（変数）cはmyCanvasって名前のやつね
var ctx = c.getContext("2d");//変数ctxに入れろ＝＞変数ｃを2次元としてね

//var ctx = myCanvas.getContext("2d");//これもOK
ctx.fillStyle = "#FF0000";//色　HEX値（16進数）で指定
ctx.fillRect(0,0,10,100);//左上0,0の座標から幅10,高さ100に彩色される
line();//lineって指示のセットあるでしょ，あれをこのタイミングでやっちゃって

function line(){//lineって名前の指示の塊をはここからですよ〜
ctx.lineWidth = 5;//ctxってやつに線を用意します幅は5pxで
ctx.strokeStyle = '#00FF00';//ctxってやつに描くときの色は#00ff00ね
ctx.beginPath();//ctxの書き始めるんで一旦リセットね
ctx.moveTo(0, 0);//ctxの０，０に移動して
ctx.lineTo(200, 200);//ctxに線を引きます200，200まで
ctx.closePath();//パスはここまでね
ctx.stroke();//じゃ描いて

}
</script>
</body>
</html>

何かが描画されたかたと思います．

必ず，HTML5でcanvas対応のブラウザを使ってくださいね．