Javascriptista

Canvasで四角形を描くロジックです。

DEMO

四角形を塗る。(fillRect)

DEMO

onload = function(){
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  drawFill();
}

function drawFill(){
  /色を指定
  ctx.fillStyle = 'rgb(255,0,0)';

  //四角形を塗り描く
  ctx.fillRect(20, 20, 120, 120);
}

事前にfillStyleで色を指定。その後にfillRectで座標と幅、高さを指定することで、四角形を塗ることができます。

四角形を線で描く(strokeRect)

DEMO

var canvas;
var ctx;

onload = function(){
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  drawFill();
}

function drawFill(){
  //色を指定
  ctx.strokeStyle = 'rgb(255,0,0)';
  //四角形を円で描く
  ctx.strokeRect(20, 20, 120, 120);
}

線を描くときも事前に色を指定します(strokeStyle)。そその後にstrokeRectで座標、幅、高さを指定して線で描きます。

四角形で削除する。(clearRect)

DEMO

var canvas;
var ctx;

onload = function(){
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  drawClear();
}

function drawClear(){
  ctx.fillStyle = 'rgb(255,0,0)';
  ctx.fillRect(0, 0, 400, 400);

  ctx.fillStyle = 'rgb(255,255,255)';
  ctx.fillRect(210, 210, 180, 180);

  //四角形の形でクリア
  ctx.clearRect(10, 10, 180, 180);
}

function downloadImage(){
  img = new Image();
  img.src = canvas.toDataURL("image/png");
  img.onload = function(){
    location.href = img.src;
  }
}

四角形を指定して画像をクリアにします。見た目は白に見えますが、透明色です。pngで保存したときに違いが出ます。