k-hamada · August 29, 2015 14:07
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>漢字の線に囲まれた部分だけを塗りつぶした画像で何の四字熟語か当てる画像を作る</title>
  <script src="http://jsrun.it/assets/k/P/F/1/kPF1v"></script>
  <style>
    canvas {
      border: 1px #ccc solid;
    }
  </style>
  </head>
  <body>
    <div class="container">
      <canvas id="origin" width="300" height="100"></canvas>
      <canvas id="change" width="300" height="100"></canvas>
      <div class="form-group" style="max-width:610px;">
        <input id="yojijukugo" type="text" size="4" maxlength="4" placeholder="四字熟語" value="臥薪嘗胆" class="form-control input-lg">
      </div>
      <div class="form-inline form-group">
        <button id="generate" class="btn btn-primary">Generate</button>
        <label><input id="box" type="checkbox" checked="checked">box</label>
      </div>
      <hr>
      <footer>
        <ul>
          <li><a href="http://blog.livedoor.jp/kinisoku/archives/4204798.html">漢字の線に囲まれた部分だけを塗りつぶした画像で何の四字熟語か当てるスレ：キニ速</a></li>
          <li><a href="http://jsdo.it/imaya/seedfill">塗りつぶしアルゴリズム(scanline seed fill algorithm) - jsdo.it - Share JavaScript, HTML5 and CSS</a></li>
        </ul>
      </footer>
    </div>

    <script>
    var origin = document.getElementById("origin");
    var change = document.getElementById("change");

    document.getElementById('generate').addEventListener('click', function (ev) {
      generate(origin);
      copy(origin, change);
      translate(change);

      if (document.getElementById("box").checked) {
        box(origin);
        box(change);
      }
    });

    function generate (canvas) {
      var ctx = canvas.getContext("2d");

      ctx.fillStyle = "#fff";
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      ctx.fillStyle = "#000";
      ctx.font = "50pt MSゴシック";
      var words = document.getElementById("yojijukugo").value.split("");
      for (var i = 0; i < 4; i++) {
        ctx.fillText(words[i] || "", 10+70*i, 75);
      }
    }

    function copy(from, to) {
      to.getContext("2d").drawImage(from, 0, 0);
    }

    function translate (canvas) {
      var ctx = canvas.getContext("2d");

      var cfa = new CanvasFillAlgorithm(canvas);
      cfa.setColorDistance(0.9);
      cfa.setAlphaDistance(0);
      cfa.paint(0, 0, 255);

      var cid = ctx.getImageData(0, 0, canvas.width, canvas.height);
      var pixels = cid.data;
      for (var i = 0, l = canvas.width * canvas.height; i < l; i++) {
        pixels[i*4]   = 255 - pixels[i*4];
        pixels[i*4+1] = 255 - pixels[i*4+1];
        pixels[i*4+2] = 255 - pixels[i*4+2];
      }
      ctx.putImageData(cid, 0, 0);
    }

    function box (canvas) {
      var ctx = canvas.getContext("2d");

      ctx.strokeRect(7.5, 14.5, 70, 70);
      ctx.strokeRect(77.5, 14.5, 70, 70);
      ctx.strokeRect(147.5, 14.5, 70, 70);
      ctx.strokeRect(217.5, 14.5, 70, 70);
      ctx.stroke();
    }
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<meta charset="utf-8">
	<title>漢字の線に囲まれた部分だけを塗りつぶした画像で何の四字熟語か当てる画像を作る</title>
	<script src="http://jsrun.it/assets/k/P/F/1/kPF1v"></script>
	<style>
	canvas {
	border: 1px #ccc solid;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<canvas id="origin" width="300" height="100"></canvas>
	<canvas id="change" width="300" height="100"></canvas>
	<div class="form-group" style="max-width:610px;">
	<input id="yojijukugo" type="text" size="4" maxlength="4" placeholder="四字熟語" value="臥薪嘗胆" class="form-control input-lg">
	</div>
	<div class="form-inline form-group">
	<button id="generate" class="btn btn-primary">Generate</button>
	<label><input id="box" type="checkbox" checked="checked">box</label>
	</div>
	<hr>
	<footer>
	<ul>
	<li><a href="http://blog.livedoor.jp/kinisoku/archives/4204798.html">漢字の線に囲まれた部分だけを塗りつぶした画像で何の四字熟語か当てるスレ：キニ速</a></li>
	<li><a href="http://jsdo.it/imaya/seedfill">塗りつぶしアルゴリズム(scanline seed fill algorithm) - jsdo.it - Share JavaScript, HTML5 and CSS</a></li>
	</ul>
	</footer>
	</div>

	<script>
	var origin = document.getElementById("origin");
	var change = document.getElementById("change");

	document.getElementById('generate').addEventListener('click', function (ev) {
	generate(origin);
	copy(origin, change);
	translate(change);

	if (document.getElementById("box").checked) {
	box(origin);
	box(change);
	}
	});

	function generate (canvas) {
	var ctx = canvas.getContext("2d");

	ctx.fillStyle = "#fff";
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	ctx.fillStyle = "#000";
	ctx.font = "50pt MSゴシック";
	var words = document.getElementById("yojijukugo").value.split("");
	for (var i = 0; i < 4; i++) {
	ctx.fillText(words[i] \|\| "", 10+70*i, 75);
	}
	}

	function copy(from, to) {
	to.getContext("2d").drawImage(from, 0, 0);
	}

	function translate (canvas) {
	var ctx = canvas.getContext("2d");

	var cfa = new CanvasFillAlgorithm(canvas);
	cfa.setColorDistance(0.9);
	cfa.setAlphaDistance(0);
	cfa.paint(0, 0, 255);

	var cid = ctx.getImageData(0, 0, canvas.width, canvas.height);
	var pixels = cid.data;
	for (var i = 0, l = canvas.width * canvas.height; i < l; i++) {
	pixels[i4] = 255 - pixels[i4];
	pixels[i4+1] = 255 - pixels[i4+1];
	pixels[i4+2] = 255 - pixels[i4+2];
	}
	ctx.putImageData(cid, 0, 0);
	}

	function box (canvas) {
	var ctx = canvas.getContext("2d");

	ctx.strokeRect(7.5, 14.5, 70, 70);
	ctx.strokeRect(77.5, 14.5, 70, 70);
	ctx.strokeRect(147.5, 14.5, 70, 70);
	ctx.strokeRect(217.5, 14.5, 70, 70);
	ctx.stroke();
	}
	</script>
	</body>
	</html>