<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>HTML5・シェルピンスキーのガスケット</title> <script language="JavaScript" type="text/javascript"> // グローバル変数 var cvs, cnt; var num = 0; var bgcolor = "#ffffff"; var color = "#000000"; window.onload = function(){ cvs = document.getElementById("gasket"); // canvas要素のオブジェクトを取得 cnt = cvs.getContext("2d"); // コンテキストを取得 cnt.fillStyle = bgcolor; cnt.fillRect(0, 0, 500, 500); cnt.fillStyle = color; fillTriangle(250, 50, 50, 450, 450, 450); gasket(250, 50, 50, 450, 450, 450, 0); }; // 三角形を塗りつぶす関数 var fillTriangle = function(x0, y0, x1, y1, x2, y2){ cvs = document.getElementById("gasket"); // canvas要素のオブジェクトを取得 cnt = cvs.getContext("2d"); // コンテキストを取得 cnt.beginPath(); cnt.moveTo(x0,y0); cnt.lineTo(x1,y1); cnt.lineTo(x2,y2); cnt.closePath(); cnt.fill(); }; var gasket = function(ax, ay, bx, by, cx, cy, n){ if(n > 0){ cnt.fillStyle = bgcolor; fillTriangle((ax+bx)/2, (ay+by)/2, (ax+cx)/2, (ay+cy)/2, (bx+cx)/2, (by+cy)/2); gasket(ax, ay, (ax+bx)/2, (ay+by)/2, (ax+cx)/2, (ay+cy)/2, n-1); gasket((ax+bx)/2, (ay+by)/2, bx, by, (bx+cx)/2, (by+cy)/2, n-1); gasket((ax+cx)/2, (ay+cy)/2, (bx+cx)/2, (by+cy)/2, cx, cy, n-1); } }; var repaint = function(){ cvs = document.getElementById("gasket"); // canvas要素のオブジェクトを取得 cnt = cvs.getContext("2d"); // コンテキストを取得 bgcolor = document.getElementById("bgcolor").value; color = document.getElementById("color").value; num = document.getElementById("number").value; cnt.fillStyle = bgcolor; cnt.fillRect(0, 0, 500, 500); cnt.fillStyle = color; fillTriangle(250, 50, 50, 450, 450, 450); gasket(250, 50, 50, 450, 450, 450, num); } // PNG画像として保存 var saveasPNG = function(){ var png = cvs.toDataURL("image/png"); document.getElementById("newImg").src = png; } </script> </head> <body bgcolor="#c0c0c0"> <div style="text-align:center;"> <h1>HTML5・シェルピンスキーのガスケット</h1> <form> 背景色: <select id="bgcolor"> <option value="#00ffff" style="background-color:#00ffff;">aqua(cyan)</option> <option value="#000000" style="background-color:#000000;color:#ffffff;">black</option> <option value="#0000ff" style="background-color:#0000ff;color:#ffffff;">blue</option> <option value="#9400d3" style="background-color:#9400d3;">darkviolet</option> <option value="#ff00ff" style="background-color:#ff00ff;">fuchsia(magenta)</option> <option value="#ffd700" style="background-color:#ffd700;">gold</option> <option value="#808080" style="background-color:#808080;">gray</option> <option value="#008000" style="background-color:#008000;color:#ffffff;">green</option> <option value="#00ff00" style="background-color:#00ff00;">lime</option> <option value="#800000" style="background-color:#800000;color:#ffffff;">maroon</option> <option value="#000080" style="background-color:#000080;color:#ffffff;">navy</option> <option value="#808000" style="background-color:#808000;">olive</option> <option value="#ffa500" style="background-color:#ffa500;">orange</option> <option value="#800080" style="background-color:#800080;color:#ffffff;">purple</option> <option value="#ff0000" style="background-color:#ff0000;">red</option> <option value="#c0c0c0" style="background-color:#c0c0c0;">silver</option> <option value="#008080" style="background-color:#008080;color:#ffffff;">teal</option> <option value="#ffffff" style="background-color:#ffffff;" selected>white</option> <option value="#ffff00" style="background-color:#ffff00;">yellow</option> <option value="#9acd32" style="background-color:#9acd32;">yellowgreen</option> </select> 描画色: <select id="color"> <option value="#00ffff" style="background-color:#00ffff;">aqua(cyan)</option> <option value="#000000" style="background-color:#000000;color:#ffffff;" selected>black</option> <option value="#0000ff" style="background-color:#0000ff;color:#ffffff;">blue</option> <option value="#9400d3" style="background-color:#9400d3;">darkviolet</option> <option value="#ff00ff" style="background-color:#ff00ff;">fuchsia(magenta)</option> <option value="#ffd700" style="background-color:#ffd700;">gold</option> <option value="#808080" style="background-color:#808080;">gray</option> <option value="#008000" style="background-color:#008000;color:#ffffff;">green</option> <option value="#00ff00" style="background-color:#00ff00;">lime</option> <option value="#800000" style="background-color:#800000;color:#ffffff;">maroon</option> <option value="#000080" style="background-color:#000080;color:#ffffff;">navy</option> <option value="#808000" style="background-color:#808000;">olive</option> <option value="#ffa500" style="background-color:#ffa500;">orange</option> <option value="#800080" style="background-color:#800080;color:#ffffff;">purple</option> <option value="#ff0000" style="background-color:#ff0000;">red</option> <option value="#c0c0c0" style="background-color:#c0c0c0;">silver</option> <option value="#008080" style="background-color:#008080;color:#ffffff;">teal</option> <option value="#ffffff" style="background-color:#ffffff;">white</option> <option value="#ffff00" style="background-color:#ffff00;">yellow</option> <option value="#9acd32" style="background-color:#9acd32;">yellowgreen</option> </select> 繰り返し回数: <select id="number"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> </select> <input type="button" value="生成する" onclick="repaint()"> <input type="button" value="PNG画像として保存" onclick="saveasPNG()"> </form> <canvas id="gasket" width="500" height="500"></canvas> <br><hr><br> <h2>お持ち帰りコーナー</h2> 「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。<br> <img id="newImg"> </div> <br><hr><br> </body> </html> |
|