HTML5のcanvasを使ってみる

download

HTML5のcanvas要素を使って、四角形と円を書いてみました。ここを参考にしました。
※追記　「download」をクリックすると、画像がダウンロードされるようにしてみました（Chrome推奨）。a要素のdownload属性を使っています（参照）。細部は「Yahoo! 知恵袋」（参照）で教えて頂きました。ありがとうございます。なるほど、「Data URI scheme」ですか。プログラミングは奥が深いですなあ。

HTML

<canvas id="myCanvas" width="200" height="200"></canvas><br>
<a download="sample" id="dwl">download</a>

JavaScript

/* canvas要素のノードオブジェクト */
var canvas = document.getElementById('myCanvas');
draw();
document.getElementById("dwl").href = canvas.toDataURL();
function draw() {
  /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  /* 2Dコンテキスト */
  var ctx = canvas.getContext('2d');
  /* 外枠 */
  ctx.strokeRect(0,0,200,200);
  /* 四角を描く */
  ctx.fillStyle = "aquamarine";
  ctx.beginPath();
  ctx.moveTo(20, 20);
  ctx.lineTo(100, 20);
  ctx.lineTo(120, 120);
  ctx.lineTo(20, 100);
  ctx.fill();
  ctx.closePath();
  ctx.stroke();
  /* 円を書く */
  ctx.beginPath();
  ctx.fillStyle = "orchid";
  ctx.arc(150,150,30,0,Math.PI*2);
  ctx.fill();
  ctx.closePath();
  ctx.stroke();
}