広告
HTML5のcanvasとJavascriptを使って画像データを9つのブロックに分割し、ブロックをシャッフルして表示してみる。
シャッフル前
シャッフル後
ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>画像を分割してシャッフル表示</title> <script type="text/javascript"> function resize(x, y) { document.orig.width = x; document.orig.height = y; } function shuffleArray(array) { var n = array.length, t, i; while (n) { i = Math.floor(Math.random() * n--); t = array[n]; array[n] = array[i]; array[i] = t; } return array; } function shuffle() { //描画コンテキストの取得 var canvas = document.getElementById('c'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(255,255,255)"; ctx.fillRect(0, 0, 300, 300); var img = new Image(); img.src = "http://freesozai.jp/sozai/roadsign/img/rds_001/1.png"; img.onload = function() { img.width = 300; img.height = 300; var xmax = 3; var ymax = 3; var width = 300/xmax; var height = 300/ymax; var width0 = img.width / xmax; var height0 = img.height / ymax; var ary = []; var cnt = 0; for(var i = 0; i < xmax; i++){ for(var j = 0; j < ymax; j++){ ary[cnt++] = [i,j]; } } ary = shuffleArray(ary); for(var i = 0; i < xmax; i++){ for(var j = 0; j < ymax; j++){ cnt--; var x = ary[cnt][0]; var y = ary[cnt][1]; ctx.drawImage(img, width0 * x, height0 * y, width0, height0, width * i, height * j, width, height); } } } } } </script> </head> <body onLoad="shuffle()"> <h4>シャッフル前</h4> <div><img src="http://freesozai.jp/sozai/roadsign/img/rds_001/1.png" name="orig" onload="resize(300,300)"></img></div> <h4>シャッフル後</h4> <canvas id="c" style="background-color:white;" width=300 height=300></canvas> <p></p> <input type="button" value="Shuffle" onclick="shuffle()"> </body> </html> |
参照
JavaScript で配列のシャッフル - HAM MEDIA MEMO
次回はこれをベースに8ピースパズルを作成予定。
広告
広告
