html5入門html5のサンプル集canvasのサンプル集

canvasステップ1 四角を描く


サンプルコードの表示結果

ソースコード


<canvas id="canvassample1" width="140" height="140"></canvas>
<script type="text/javascript">
 onload = function() {
   draw1();
 };
 function draw1() {
  var canvas = document.getElementById('canvassample1');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  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>