随机对称生成的脸图【?】
<!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>
唔……
<html> <body style="text-align:center;background-color:#1e576b"> <canvas id="logoCanvas"></canvas> </body> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript"> function drawLogo() { var w = 11; var h = 17; var border = 24; var map = [ [1,1,1,1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0,0,0,0,1], [1,0,1,0,1,1,1,1,1,0,1], [1,0,1,0,0,0,0,0,1,0,1], [1,0,1,0,1,1,1,0,1,0,1], [1,0,1,0,1,0,1,0,1,0,1], [1,0,1,0,1,0,1,0,1,0,1], [1,0,1,0,0,0,0,0,1,0,1], [1,0,1,1,1,0,1,1,1,0,1], [1,0,1,0,0,0,0,0,1,0,1], [1,0,1,0,1,1,1,0,1,0,1], [1,0,1,0,1,0,0,0,1,0,1], [1,0,1,0,1,1,1,0,1,0,1], [1,0,1,0,0,0,0,0,1,0,1], [1,0,1,1,1,0,1,1,1,0,1], [1,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,1] ] 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) { if (map[y][x] == 0) {continue;} ctx.fillStyle='#FFF'; ctx.fillRect(x * border, y * border, border, border); } } } $(document).ready(function() { drawLogo(); }); </script> </html>