HTML5・ヴィチェックの雪片

背景色： 描画色： 繰り返し回数：


お持ち帰りコーナー

「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。


ソースコード

carpet.html

<!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("vicsek"); // canvas要素のオブジェクトを取得
  cnt = cvs.getContext("2d"); // コンテキストを取得

  cnt.fillStyle = bgcolor;
  cnt.fillRect(0, 0, 500, 500);

  cnt.fillStyle = color;
  cnt.fillRect(25, 25, 450, 450);

  vicsek(25, 25, 450, 450, 0);
};

var vicsek = function(x, y, w, h, n){
  if(n > 0){
    cnt.fillStyle = bgcolor;
    cnt.fillRect(x+w/3, y, w/3, h/3);
    cnt.fillRect(x, y+h/3, w/3, h/3);
    cnt.fillRect(x+2*w/3, y+h/3, w/3, h/3);
    cnt.fillRect(x+w/3, y+2*h/3, w/3, h/3);
    vicsek(x, y, w/3, h/3, n-1);
    vicsek(x+2*w/3, y, w/3, h/3, n-1);
    vicsek(x+w/3, y+h/3, w/3, h/3, n-1);
    vicsek(x, y+2*h/3, w/3, h/3, n-1);
    vicsek(x+2*w/3, y+2*h/3, w/3, h/3, n-1);
  }
};

var repaint = function(){
  cvs = document.getElementById("vicsek"); // 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;
  cnt.fillRect(25, 25, 450, 450);

  vicsek(25, 25, 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="vicsek" width="500" height="500"></canvas>

<br><hr><br>

<h2>お持ち帰りコーナー</h2>
「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。<br>
<img id="newImg">

</div>

<br><hr><br>

</body>
</html>


Shadow Academy トップへ戻る

inserted by FC2 system