canvasって?


何ができるの?


サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />

<!--[if IE]><script type="text/javascript" src="/common/js/ie.js"></script><![endif ]-->
<script type="text/javascript" src="/common/js/navlinkselect.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript">
onload = function() {
  draw();
};

function draw() {
  /* canvas要素のノードオブジェクト */
  var canvas = document.getElementById('canvassample');
  /* canvas要素の存在チェックと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>
</head>

<body>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<canvas id="canvassample" width="140" height="140"></canvas>
</body>
</html>
最終更新:2011年02月25日 23:56