歌与帘与你的寄望
divide by zero
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>
唔……
某烟火（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>