後から描く

onclickなどとの組み合わせ

クリックで円を描く

[draw1]  [draw2]  [draw3]の3つの function を作ってクリックで実行するようにしています。それぞれの function ではランダムな位置にそれぞれの色の円を描きます。

getElementById() で探す領域が全部 area1 なので各色とも同じ canvas に描かれていきます。不透明なので重なると下が隠されていきます。

head部に書くjavascriptは長いのでスクロールするようにしました。[draw1]  [draw2]  [draw3] で色分けしています。各色ごとにほとんど同じで、無駄が多いのですがその分わかりやすく書かれています。

function draw1() {
  var canv = document.getElementById('area1');
  var g = canv.getContext('2d');

  var a = Math.random() * 450;
  var x = (Math.floor( a ) +1 );
      a = Math.random() * 150;
  var y = (Math.floor( a ) +1 );

  g.beginPath();
  g.fillStyle   = '#ffcccc';
  g.arc(x, y, 40, 0, Math.PI*2, true);
  g.fill();
}
function draw2() {
  var canv = document.getElementById('area1');
  var g = canv.getContext('2d');

  var a = Math.random() * 450;
  var x = (Math.floor( a ) +1 );
      a = Math.random() * 150;
  var y = (Math.floor( a ) +1 );

  g.beginPath();
  g.fillStyle   = '#ccffcc';
  g.arc(x, y, 40, 0, Math.PI*2, true);
  g.fill();
}
function draw3() {
  var canv = document.getElementById('area1');
  var g= canv.getContext('2d');

  var a = Math.random() * 450;
  var x = (Math.floor( a ) +1 );
      a = Math.random() * 150;
  var y = (Math.floor( a ) +1 );

  g.beginPath();
  g.fillStyle   = '#ccccff';
  g.arc(x, y, 40, 0, Math.PI*2, true);
  g.fill();
}
aa

クリックで円を描きます。  [draw1]  [draw2]  [draw3]

<canvas id="area1" width="450" height="150"></canvas>
<p>クリックで円を描きます。 
<span onclick="draw1()">[draw1]</span> 
<span onclick="draw2()">[draw2]</span> 
<span onclick="draw3()">[draw3]</span>
</p>

別のやり方

今度は色が透明色になっているので、前の色を残しながら色を重ねていきます。

javascriptはdraw5(c) と c の部分(引数といいます)でどの色かを判断するようにしており、その分1つで済んでいます。

function draw5(c) {
   var canv = document.getElementById('area2');
   var g = canv.getContext('2d');
   var color;
   if (c == 1) color = "rgba(255, 0, 0, 0.5)";
   if (c == 2) color = "rgba(0, 255, 0, 0.5)";
   if (c == 3) color = "rgba(0, 0, 255, 0.5)";
   var a = Math.random() * 450;
   var x = (Math.floor( a ) +1 );
       a = Math.random() * 150;
   var y = (Math.floor( a ) +1 );

   g.beginPath();
   g.fillStyle = color;
   g.arc(x, y, 40, 0, Math.PI*2, true);
   g.fill();
}
aa

クリックで円を描きます(透明)。  [draw1]  [draw2]  [draw3]

<canvas id="area2" width="450" height="150"></canvas>
<p>クリックで円を描きます(透明)。 
<span onclick="draw5(1)">[draw1]</span> 
<span onclick="draw5(2)">[draw2]</span> 
<span onclick="draw5(3)">[draw3]</span>
</p>

しくみ

draw5がクリックで呼び出される時に、1という値を持っていきます。

<span onclick="draw5(1)">[draw1]</span> 

draw5 では、function draw5(c) のcでそれを受けます。

function draw5(c) {

draw5 の中では c=5 と命令したのと同じことになります。

c が使われるのは if の中です。

   if (c == 1) 

これは、「cが1と等しければ」という意味です。成立すればこの後に書かれた ; までの部分を実行します。これにより、cの値によって、色が異なるということになります。

今回は rgba() で指定していますから、透明度を考慮しています。

課題 ファイル名 canvas3.html

クリックする場所が複数あり、それぞれ異なる絵が加えられていくような canvasのあるページをつくりなさい。

index.htmlからは「canvas3」という名前のリンクから行けるようにすること。

if は使っても使わなくてもよい。


ウェブページ(Feb.2009)
聖愛中学高等学校
http://www.seiai.ed.jp/
Feb.2009 初稿