繰り返しのあるもの

顔

<canvas id="area0" width="460" height="160"></canvas>
<p>クリックで円を描きます。　
<span onclick="drawkao()">顔</span>
</p>

クリックで顔を描きます。　 [顔]　

function drawkao() {
  var canv = document.getElementById('area0');
  var g = canv.getContext('2d');
  var bx = 30;      //base x :横スタート位置 座標
  var by = 30;      //base y :縦スタート位置 座標
  var dx = 50;      //隣の顔との左右位置の差
  var dy = 50;      //隣の顔との上下位置の差
  g.strokeStyle = '#000099';
  g.fillStyle   = '#ff0000';

  for (var y=by; 160>y ; y+=dy){
     for (var x=bx; 460>x ; x+=dx){
        draw1kao(g,x,y);
      }
   }
}
function draw1kao(g,tx,ty){
  g.strokeRect(tx-20,ty-20,40,40); //外側の四角
  g.beginPath(); //ここから右目
  g.arc(tx+3,ty-10,2,0,Math.PI*2,true);
  g.stroke();
  g.beginPath(); //ここから左目
  g.arc(tx-3,ty-10,2,0,Math.PI*2,true);
  g.stroke();
  g.beginPath(); //ここから鼻
  g.moveTo(tx,ty-2);
  g.lineTo(tx,ty+5);
  g.moveTo(tx-8,ty+10); //ここから口
  g.lineTo(tx+8,ty+10);
  g.stroke();
}

draw1kaoには、1個の絵を tx,ty を中心として描くfunctionを設計する(draw1kao(g,tx,ty))。それぞれの座標をtx,tyを加える形にしておけば、描画位置をtx,tyで指定していくつでも絵を描かせることができる。

基点の(bx, by)にdx,dyの整数倍をかけて、描画位置(x, y)を求めて繰り返し描いていく(drawkao())。

カニ

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

function drawkani() {
  var canv = document.getElementById('area2');
  var g = canv.getContext('2d');
  var bx, by, dx, dy;
  bx = 25;      //base x :スタート位置 座標
  by = 35;
  dx = 50;      //隣のカニとの位置の差
  dy = 50;
  g.strokeStyle = '#800000';
  g.fillStyle   = '#ff0000';
  // 縦横に繰り返す(150,450はエリアの大きさ)
  for (var y=by; 150>y ; y+=dy){
     for (var x=bx; 450>x ; x+=dx){
        draw1kani(g,x,y);    //１匹を描く関数
      }
   }
}
//１匹を描く関数（コンテクスト,x位置、y位置）
function draw1kani(g,tx,ty){
  g.beginPath();
  g.moveTo(tx,ty);
  g.lineTo(tx+15,ty-20);
  g.moveTo(tx,ty);
  g.lineTo(tx-15,ty-20);
  g.moveTo(tx,ty);
  g.lineTo(tx+3,ty-15);
  g.arc(tx+3,ty-15,2,0,Math.PI*2,true);
  g.moveTo(tx,ty);
  g.lineTo(tx-3,ty-15);
  g.arc(tx-3,ty-15,2,0,Math.PI*2,true);

  for (var i=1; 5>i ; i++){
     g.moveTo(tx-20,ty-10+i*4);
     g.lineTo(tx+20,ty-10+i*4);
  }
  g.stroke();

  g.beginPath();
  g.moveTo(tx+15,ty-20);
  g.arc(tx+15,ty-20, 5, Math.PI*3/2,Math.PI*7/4, true);
  g.lineTo(tx+15,ty-20);
  g.fill();
  g.stroke();

  g.beginPath();
  g.moveTo(tx-15,ty-20);
  g.arc(tx-15,ty-20, 5, Math.PI*3/2,Math.PI*5/4, false);
  g.lineTo(tx-15,ty-20);
  g.fill();
  g.stroke();

  g.strokeRect(tx-10, ty-8, 20, 16);
  g.fillRect(tx-10, ty-8, 20, 16);

  g.beginPath();
  g.moveTo(tx-3,ty-3+2);
  g.lineTo(tx+3,ty+3+2);
  g.moveTo(tx-3,ty+3+2);
  g.lineTo(tx+3,ty-3+2);
  g.stroke();
}

1個の絵を０を中心として描くfunctionを設計する(draw1kani(g,tx,ty))。それぞれのx,yの値にtx,tyを加える形にしておけばあとで平行移動できる。

基点の(bx, by)にdx,dyの整数倍をかけて、描画位置(x, y)を求めて繰り返し描いていく(drawkani())。

花

クリックで花を描きます。　 [花]　

function drawhana() {
  var canv = document.getElementById('area4');
  var g = canv.getContext('2d');
  //g.globalAlpha = 1;
  var bx, by, dx, dy;
  bx = 25;
  by = 25;
  dx = 50;
  dy = 50;
  g.strokeStyle = '#800000';
  g.fillStyle   = '#ff0000';

  for (var y=by; 150>y ; y+=dy){
     for (var x=bx; 450>x ; x+=dx){
        draw1hana(g,x,y);
      }
   }
}
function draw1hana(g,tx,ty){
  var rr = 18;
  var r  = 5;
  var dkak = Math.PI/6;
  g.fillStyle='#ff00ff'
  for (var k=0; Math.PI*2>k ; k+=dkak){
    g.beginPath();
    g.arc(Math.cos(k)*rr+tx,Math.sin(k)*rr+ty,r,0,Math.PI*2,true);
    g.fill();
  }
  g.fillStyle='#ffff00'
  g.beginPath();
  g.arc(tx,ty,rr-r,0,Math.PI*2,true);
  g.fill();
}

ランダムな色

ここにマウスが触れると色が変わります
ここにマウスが触れると色が変わります

function drawrec(){
  var canv = document.getElementById('area3');
  var g = canv.getContext('2d');
  var bred=0; var bgrn=0; var bblu=0;
  var red=0;  var grn=0;  var blu=0;
  var dc = 51 ;
  var bx, by, dx, dy, w, h;
  bx = 3;
  by = 4;
  dx = 32;
  dy = 24;
  w  = 30;
  h  = 22;
  g.strokeStyle = '#f0f0f0';
  var color1 = '#ffffcc';
  var color2 = '#ccffff';
  var color3 = '#ffccff';

  for (var y=by; 150-h>y ; y+=dy){
     for (var x=bx; 450-w>x ; x+=dx){
        red=Math.floor(dc*Math.random());
        grn=Math.floor(dc*Math.random());
        blu=Math.floor(dc*Math.random());
        a  =Math.floor(100*Math.random());
        if (a > 90) {
             red = red + 255 -dc;
             grn = grn + 255 -dc -17;
             blu = blu + 255 -dc;
        }else if (a > 50) {
             red = red + 255 -dc-10;
             grn = grn + 255 -dc;
             blu = blu + 255 -dc;
        }else{
             red = red + 255 -dc;
             grn = grn + 255 -dc;
             blu = blu + 255 -dc-10;
        }
        g.fillStyle='rgb('+String(red)+','+String(grn)+','+String(blu)+')';
        g.fillRect(x,y,w,h);
      }
   }
}

円を使ったランダムな模様

クリックで描きます。　 [明るさの変化]　 [大きさも変化]　 [半透明で変化]

明るさの変化

function draw1() {
  var canv = document.getElementById('area1');
  if ( ! canv || ! canv.getContext )  return false;
  var g = canv.getContext('2d');
  var red=0; var grn=0; var blu=0;
  var a ;
  var x ;
  var ct;
  var rad = 20;
  for(var ct=0; 10>ct; ct++){
     a = Math.random() * 480;
     x = (Math.floor( a ) +1 );
     for(var y=0; 360>y; y=y+4){
        g.beginPath();
         grn=grn+Math.floor(16*Math.random());
         if ( grn>255 ) grn=0;
        g.fillStyle = 'rgb('+String(red)+','+String(grn)+','+String(blu)+')';
        g.arc(x, y, rad, 0, Math.PI*2, true);
        g.fill();
       }
  }
}

大きさも変化

function draw2() {
  var canv = document.getElementById('area1');
  if ( ! canv || ! canv.getContext )  return false;
  var g = canv.getContext('2d');
  var red=0; var grn=0; var blu=0;
  var a ;
  var x ;
  var ct;
  var rad;
  for(var ct=0; 10>ct; ct++){
     a = Math.random() * 480;
     x = Math.floor( a );
     for(var y=0; 360>y; y=y+4){
        g.beginPath();
         grn=grn+Math.floor(16*Math.random());
         if ( grn>255 ) grn=0;
        rad = 30*Math.random();
        g.fillStyle = 'rgb('+String(red)+','+String(grn)+','+String(blu)+')';
        g.arc(x, y, rad, 0, Math.PI*2, true);
        g.fill();
       }
  }
}

半透明で変化

function draw3() {
  var canv = document.getElementById('area1');
  if ( ! canv || ! canv.getContext )  return false;
  var g = canv.getContext('2d');
  var red=0; var grn=0; var blu=0;
  var a ;
  var x ;
  var ct;
  var rad;
  for(var ct=0; 10>ct; ct++){
     a = Math.random() * 480;
     x = Math.floor( a );
     for(var y=0; 360>y; y=y+4){
        g.beginPath();
         grn=grn+Math.floor(16*Math.random());
         if ( grn>255 ) grn=0;
        rad = 30*Math.random();
        g.fillStyle = 'rgba('+String(red)+','+String(grn)+','+String(blu)+',0.5)';
        g.arc(x, y, rad, 0, Math.PI*2, true);
        g.fill();
       }
  }
}

ポイント

<の使用を避ける

<はタグの始まりですから正しく解釈されません。比較するものの位置を変えて>を使います。

根本的な解決は javascript の部分を css の時のように外部のファイルにしてしまうことです。

forの基本動作

for (初期値 ; 終了条件 ; 繰返時の作業){繰り返しの内容}

for(var y=0; 360>y; y=y+4)

変数にyを使い、初期値は0とする; yが360より小さい間くりかえす; 繰り返す前にyに4を足す。( y+=4 と同じ)

for(var ct=0; 10>ct; ct++)

変数にctを使い、初期値は0とする; ctが10より小さい間くりかえす; 繰り返す前にctに1を足す。( ct=ct+1 と同じ)

for (var x=bx; 450>x ; x+=dx)

変数にxを使い、初期値はbxとする; xが450より小さい間くりかえす; 繰り返す前にxにdxを足す。( x=x+dx と同じ)

乱数(ランダムな数)の発生

Math.random()

0以上、1未満の実数（小数以下を持つ数）

100*Math.random()

0以上、100未満の実数（小数以下を持つ数）

Math.floor(100*Math.random())

0以上、99以下の整数（99を含む）

Math.floor(100*Math.random()) + 1

1以上、100以下の整数（100を含む）

これで0以上から100未満の整数の乱数ができる。100のところに、作りたい乱数の最大値を入れると、それを上限とする乱数ができる。

Math.floor(6*Math.random()) + 1

1以上、6以下の整数（6を含む）

Math.floor(4*Math.random()) + 9

9以上、12以下の整数（12を含む）

9から始まって４とおり(9,10,11,12)

課題 ファイル名 canvas4.html

canvasのあるページの作成。繰り返しのあるもの。

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