HTML5 Canvas

canvacとは

HTML5の一部で、動的な2次元ビットマップ画像の描画のためのHTMLの要素

HTMLの準備

1. canvas要素を記述
2. InternetExplorerに対応させるため、excanvas.jsを呼び出す
3. javascriptでcanvasのidを指定
4. パス描画を命令する

excanvas.jsはコチラからダウンロードできます

http://excanvas.sourceforge.net/

コード

<script type="text/javascript" src="jquery.min.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript">
$(function(){
  //HTMLのDOM要素を選択
  var canvas = document.getElementByID('sample');
  //図形描画APIを呼び出す
  var ctx = canvas.getContext('2d');
  var x1 = 0;
  var y1 = 0;
  var w1 = 200;
  var h1 = 200;
  //四角形を描く
  ctx.strokeRect(0, 0, 200, 200);
  // x座標開始点、y座標開始点、x座標長さ、y座標長さ
  var x2 = 10;
  var y2 = 20;
  var w2 = 80;
  var h2 = 120;
  //四角形を塗りつぶす
  ctx.fillRect(10, 20, 80, 120);
});
</script>
<canvas id="sample" width="200" height="200"></canvas>

実例

描画用メソッド

2次曲線の不具合

IEでは2次曲線(ベジェ)が上手く描写されない