随机对称生成的脸图【?】
<!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>
囍
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body style="margin:0;" onload="start();"> <canvas id="_canvas"></canvas> </body> <script> // 烟火 function Fire(x, y, life, directionX, directionY) { this.x = x; this.y = y; this.life = life; this.frames = 0; // 帧数计时 this.directionX = directionX; this.directionY = directionY; this.color = "rgb(" + Math.floor(Math.random() * 128 + 128) + "," + Math.floor(Math.random() * 128 + 128) + "," + Math.floor(Math.random() * 128 + 128) +")"; } Fire.prototype = { // 行进 move : function() { this.x += this.directionX; this.y += this.directionY; this.directionX *= 0.94; this.directionY *= 0.94; this.directionY += 0.3; this.frames += 1; }, // 失效 powerOut : function() { return this.frames == this.life; }, x : function() { return this.x; }, y : function() { return this.y; }, color : function() { return this.color; } } // 烟花 function FirePackage(x, y) { this.x = x; this.y = y; this.fires = new Array(); } FirePackage.prototype = { createFires : function(num) { // 添加烟火 if (!num) { num = Math.floor(Math.random() * 50) + 10; } for (var i = 0; i < num; i += 1) { var life = Math.floor(Math.random() * 80) + 40; this.fires[i] = new Fire(this.x, this.y, life, Math.random() * 20 * (Math.random() * 10 >=5 ? (-1) : 1), Math.random() * 20 * (Math.random() * 10 >= 5 ? (-1) : 1)); } }, boom : function(ctx) { var powerOutCount = 0; if (this.powerOut()) { return; } for (var i = 0; i < this.fires.length; i += 1) { var fire = this.fires[i]; if (!fire.powerOut()) { fire.move(); ctx.fillStyle= fire.color; ctx.beginPath(); //console.clear(); //console.log("fire.x :" + fire.x, "fire.y:" + fire.y); //console.log("fire.color :" + fire.color); ctx.arc(fire.x,fire.y,5,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); } else { powerOutCount += 1; } } if (powerOutCount == this.fires.length) { this.powerOutFlag = true; } }, powerOut : function() { return this.powerOutFlag ? true : false; } } </script> <script> var canvas = document.getElementById('_canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx=canvas.getContext('2d'); var timeInterval; window.onresize = function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } var firePackages = new Array(); function createFirePackage(x, y) { var firePackage = new FirePackage(x, y); firePackage.createFires(); firePackages.push(firePackage); } var pushInterval; var pushFire = function() { clearInterval(pushInterval); createFirePackage(Math.random() * canvas.width , Math.random() * canvas.height); pushInterval = setInterval(pushFire, Math.random() * 1000 + 100); } function start() { var loop = function() { if (firePackages.length == 0) { createFirePackage(Math.random() * canvas.width , Math.random() * canvas.height); } var powerOutCount = 0; var border = 320; for (var i = 0; i < firePackages.length; i += 1) { var firePackage = firePackages[i]; ctx.fillStyle="rgba(0,0,0,0.1)"; ctx.fillRect(0,0,canvas.width,canvas.height); if (!firePackage.powerOut()) { firePackage.boom(ctx); } else { firePackages[i] = firePackages[firePackages.length - 1]; firePackages.pop(); } } var border = 360; ctx.fillStyle="rgba(255,0,0,1)"; ctx.font = border + "px 黑体"; ctx.fillText("囍",(canvas.width - border) / 2, border); } timeInterval = setInterval(loop, 10); pushFire(); loop(); } </script> </html>
<!DOCTYPE HTML> <html> <head> </head> <body> DROP!!!!!!!!!! <script type="text/javascript"> function chgImg(evt) { var reader = evt.target; console.log(reader.result); var file = reader.file; document.getElementsByTagName("body")[0].setAttribute("style","background-image:url(" + reader.result + ");"); } document.ondragstart = function(e) { e.preventDefault(); } document.ondragover = function(e) { e.dataTransfer.dragEffect = 'copy'; e.preventDefault(); } document.ondrop = function(e){ var files = e.dataTransfer.files; for(var i = 0, len = files.length; i < len; i++) { var f = files[i]; if (f.type.indexOf("image") == -1) {continue;} var reader = new FileReader(); reader.onloadend = chgImg; reader.file = f; reader.readAsDataURL(f); } e.preventDefault(); } </script> </body> </html>
<form> <fieldset> <legend>health information</legend> height: <input type="text" /> weight: <input type="text" /> </fieldset> </form>
←_←好怀念