orz像素脸图。。。

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

<!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>

唔……

 

 

脑壳logo

<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>
 

某烟火(canvas)

<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>

JavaScript拖拽文件作为背景图

<!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>

childhood vb

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

←_←好怀念