[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(); }
クリックで円を描きます。 [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(); }
クリックで円を描きます(透明)。 [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() で指定していますから、透明度を考慮しています。
クリックする場所が複数あり、それぞれ異なる絵が加えられていくような canvasのあるページをつくりなさい。
index.htmlからは「canvas3」という名前のリンクから行けるようにすること。
if は使っても使わなくてもよい。