orz像素脸图。。。

烁灵 posted @ 2015年7月15日 15:58 in 前端 with tags javascript html5 脑壳 , 1099 阅读

随机对称生成的脸图【?】

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>orz</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet">
</head>
<body style="text-align:center;background-color:#1e576b">
	<div>
		<input type="text" id="dim" placeholder="dim"/>
		<input type="button" id="submit" value="submit"/>
	</div>
	<div style="margin:1em"><canvas id="logoCanvas"></canvas></div>
</body>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<script type="text/javascript">
	function draw(w, h) {
		
		var w = w || 8;
		var h = h || 8;
		var border = 12;
		var val = [];
		for (var i = 0; i < h; i += 1) {
			var str = [];
			for (var j = 0; j < w / 2; j += 1) {
				var rand = parseInt(Math.random() * 2);
				str[j] = rand;
				str[w - j] = rand;
			}
			val.push(str.join(""));
			console.log(str.join(""));
		}
		
		var canvas=document.getElementById('logoCanvas');
		var fillWidth = border * w;
		var fillHeight = border * h;
		$(canvas).attr("height", fillHeight + "px");
		$(canvas).attr("width", fillWidth + "px");
		var ctx=canvas.getContext('2d');
		ctx.clearRect(0, 0, fillWidth, fillHeight);
		for (var y = 0; y < h; y += 1) {
			for (var x = 0; x < w; x += 1) {
				ctx.fillStyle= val[y][x] == "1" ? '#000' : '#FFF';
				console.log("x y v, %d %d %s", x, y, val[y][x]);
				ctx.fillRect(x * border, y * border, border, border);
			}
		}
	}
	$(document).ready(function() {
		draw();
		$("#submit").click(function(){
			var d = $("#dim").val();
			draw(d, d);
		});
	});

</script>
</html>

唔……

 

 


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter