Skip to content

Instantly share code, notes, and snippets.

@k-hamada
Last active August 29, 2015 14:07
Show Gist options
  • Save k-hamada/02383e0406b2447600f8 to your computer and use it in GitHub Desktop.
Save k-hamada/02383e0406b2447600f8 to your computer and use it in GitHub Desktop.
[漢字の線に囲まれた部分だけを塗りつぶした画像で何の四字熟語か当てる画像を作る](http://bl.ocks.org/k-hamada/02383e0406b2447600f8)
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment