fillRect()

strokeRect()

clearRect()

コード

onload = function() {
  draw1();
  draw2();
  draw3();
};
/* fillRect()の例 */
function draw1() {
  var canvas = document.getElementById('c1');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillRect(20, 20, 80, 40);
}
/* strokeRect()の例 */
function draw2() {
  var canvas = document.getElementById('c2');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.strokeRect(20, 20, 80, 40);
}
/* clearRect()の例 */
function draw3() {
  var canvas = document.getElementById('c3');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillRect(20, 20, 100, 100);
  ctx.beginPath();
  ctx.clearRect(50, 70, 60, 30);
}

『さまざまな図形を描く』に戻る