HTML5 Canvasいじり
http://www.geocities.jp/psipage/html5/html5_canvas2.html
boxの中でクリックすると素敵な円が現れます。マウス座標にも付いていくはず。
ソース
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Example2: HTML5 canvas</title> <!--http://d.hatena.ne.jp/juntk/--> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="ms">Click in the box. </div> <canvas id="canvassample" width="640" height="320" onmousedown="mouseClicked()" onmousemove="mouseMove(event.clientX, event.clientY)" onmouseup="mouseUp()" >here </canvas> <script type="text/javascript"> // init window.onload = function() { setInterval('draw()',15); }; var w_size = 640; var h_size = w_size / 2; var mouse_X = 0; var mouse_Y = 0; var draw_allow = false; // draw var _oval_size = 15; var oval_size = _oval_size; var padding = w_size / 2 / 2; var posX = []; var posY = []; var _color = []; var _count = 12; function draw() { /* canvas要素のノードオブジェクト */ var canvas = document.getElementById('canvassample'); if ( ! canvas || ! canvas.getContext) { document.getElementById('ms').innerHTML = "This browser is not supported." return false; } if (!draw_allow && oval_size <0) { return; }; if (oval_size < 0) { oval_size = _oval_size; setPos(); setColors(); } /* 2Dコンテキスト */ var ctx = canvas.getContext('2d'); ctx.lineJoin = "bevel"; ctx.clearRect(0,0,w_size,h_size); ctx.strokeRect(0,0,w_size,h_size); for (var i=0;i<_count;i++) { ctx.beginPath(); ctx.fillStyle = _color[i]; ctx.arc(posX[i], posY[i], oval_size, 0, Math.PI*2, false); ctx.fill(); ctx.closePath(); } oval_size = oval_size - 1; }; function mouseClicked() { draw_allow = true; setPos(); setColors(); }; function mouseMove(x,y) { mouse_X = x; mouse_Y = y; document.getElementById('debug').innerHTML = "x="+mouse_X + " y="+mouse_Y }; function mouseUp() { draw_allow = false; }; function setPos() { for (var i=0;i<_count;i++) { if ((Math.random() * 2) < 1) { posX[i] = mouse_X - (Math.random() * padding); } else { posX[i] = mouse_X + (Math.random() * padding); } if ((Math.random() * 2) < 1) { posY[i] = mouse_Y - (Math.random() * padding); } else { posY[i] = mouse_Y + (Math.random() * padding); } } }; function setColor(index) { var color = Math.floor(Math.random() * 0xFFFFFF).toString(16); //#RRGGBBを取得 for(count = color.length; count < 6; count++){ color = "0" + color; //上位に0を補完する } _color[index] = "#" + color; }; function setColors() { for (var i=0;i<_count;i++) { setColor(i); } }; function change() { _oval_size = parseInt(document.getElementById('size').value); _count = parseInt(document.getElementById('count').value); padding = parseInt(document.getElementById('padding').value); setPos() setColors(); } </script> <div id="debug"> </div> <p> <form> size:<input type="text" id="size" value="15" onchange="change()"></input> count:<input type="text" id="count" value="12" onchange="change()"></input> padding:<input type="text" id="padding" value="160" onchange="change()"></input> </form> </p> <p>Example2: HTML5 canvas</p> <p><a href="http://www.html5.jp/canvas/ref.html">http://www.html5.jp/canvas/ref.html</a></p> <p><a href="http://d.hatena.ne.jp/juntk/20100422/1271867363">またまたcanvasいじり。</a></p> </body> </html>