ここにマウスが触れると色が変わります
ここにマウスが触れると色が変わります
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); } } }
クリックで蟹を描きます。 [蟹] [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); //1匹を描く関数 } } } //1匹を描く関数(コンテクスト,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個の絵を0を中心として描く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 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 (初期値 ; 終了条件 ; 繰返時の作業){繰り返しの内容}
これで0以上から100未満の整数の乱数ができる。100のところに、作りたい乱数の最大値を入れると、それを上限とする乱数ができる。
canvasのあるページの作成。繰り返しのあるもの。
index.htmlからは「canvas4」という名前のリンクから行けるようにすること。