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>

実例

描画用メソッド

メソッド 解説
ctx.beginPath() 描画パスを開始する
ctx.closePath() 描画パスを終了する
ctx.stroke() 描画パスを描く
ctx.fill() 描画パスを塗りつぶす
ctx.moveTo(x, y) パスを指定座標へ移動する
ctx.lineTo(x, y) 直線パスを描く
ctx.arc(x, y, r, startAngle, endAngle, anticlockwise) 円のパスを描く
ctx.strokeRect(x, y, w, h) 四角形を描く
ctx.fillRect(x, y, w, h) 四角形を塗りつぶす
ctx.strokeStyle = "#ffffff" 線の色を指定 (16進数のRGB指定)
ctx.fillStyle = "#ffffff" 塗りつぶし色を指定 (16進数のRGB指定)
ctx.fillStyle = 9 線の太さを指定
引数 解説
x x座標
y y座標
w
h 高さ
r 円の半径
startAngle 円弧の開始角度
endAngle 円弧の終了角度
anticlockwise 円弧描画の向き (true, false)

2次曲線の不具合

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