<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 彩虹闪电 | 激光炮GIF生成器</title>
<style>
div.a {
text-align: center;
font-size: 25px;
color: #000000;
background-color: #aaffee;
position: absolute;
height: 140;
width: 300;
top: 50%;
left: 50%;
margin-top: -70px;
margin-left: -150px;
}
</style>
</head>
<body>
<input type="file" onchange="yomi(0)" />
<br />
<input type="file" onchange="yomi(1)" />
<br />
<div id="moto"> </div>
wid
<input type="text" id="wid" value="500" size=3 /> hei
<input type="text" id="hei" value="300" size=3 />
<input type="button" value="尺寸变更" onclick="init()" />
<br />
<canvas></canvas>
<br />
<input type="button" onclick="ch()" id="stb" value="动作检验" />
<br />
<br /> 火焰数
<input type="text" id="maisuu" value="40" size=3 /> 光束粗细
<input type="text" id="futosa" value="3" size=3 />
<br />
<input type="button" onclick="gifka()" value="生成GIF图" />↓
<div id="mega"></div>
<br />
<br />
<img></img>
<br />
<input type="button" onclick="tome()" id="tome" value="×" />
<br />
<span>
<canvas style="position:absolute;top:0;width:100%;height:100%" ></canvas>
<div class="a">
Please wait
<br />
<br />
<div style="width:300px;height:10px;background-color:#bbbbbb;">
<div id="sin" style="width:2px;height:10px;background-color:#ffeeaa;"></div>
</div>
<div id="tyoku" style="font-size:25px;"></div>
<br />
<input type="button" onclick="isrend=0;" value="cancel" />
</div>
</span>
<br />
<br />
<br />
<br /> Click square to adjust the drag.
<br /> 红：红色光束基准
<br /> 蓝：蓝色光束点
<br /> 绿：画面分割点
<br />
<br /> 按GIF作成按钮
<br /> 用右键单击保存GIF
<br />
<br /> ※不推荐使用IE
<br />
<br />
<script>
var canvas, ctx, count, ho, canvas2, ctx2, gmax, timer, isstart, futosa,
nowbit, nowpin, kari, tan8, bgr, mousex, mousey, nowpo, poi, tim,
sax, say, isrend, mae, isma, posize, imas;
canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
canvas2 = document.getElementsByTagName('canvas')[1];
ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = "rgba(0,0,0,0.4)";
ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
document.getElementsByTagName('span')[0].style.visibility = "hidden";
document.getElementById("tome").style.visibility = "hidden";
document.body.onselectstart = function() {
return false;
};
window.onscroll = function() {
var a = document.documentElement.scrollTop || document.body.scrollTop;
canvas2.style.top = a + "px";
};
mousex = mousey = nowpo = 0;
if (navigator.userAgent.indexOf('iPhone') > 0 ||
navigator.userAgent.indexOf('iPad') > 0 ||
navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
canvas.addEventListener('touchstart', mdn);
canvas.addEventListener('touchmove', mmv);
canvas.addEventListener('touchend', function() {
nowpo = 0;
});
document.body.removeEventListener('touchmove', 0, false);
posize = 16;
isma = 1;
} else {
document.onmouseup = function() {
nowpo = 0;
};
canvas.addEventListener('mousemove', mmv);
canvas.addEventListener('mousedown', mdn);
posize = 5;
}
gmax = 12;
imas = [];
init();
function init() {
var a, b, c;
count = 0;
canvas.width = namnam("wid", 3, 5000, 400);
canvas.height = namnam("hei", 3, 5000, 300);
ctx.fillRect(0, 0, canvas.width, canvas.height);
b = (canvas.width / 4) | 0;
c = (canvas.height / 2) | 0;
poi = [
[b, c],
[canvas.width - b, c],
[canvas.width / 2, posize]
];
byo();
}
function namnam(id, min, max, def) {
var a = document.getElementById(id);
var b = a.value;
if (isNaN(b)) b = def;
if (b < min) b = min;
if (b > max) b = max;
b = b | 0;
a.value = b;
return b;
}
function aaa() {
var a, x1, y1, x2, y2, tx, ty;
ctx.putImageData(bgr, 0, 0);
ctx.globalCompositeOperation = "source-over";
ctx.globalCompositeOperation = "lighter";
tim = count / gmax * Math.PI * 2;
x1 = poi[0][0];
y1 = poi[0][1];
x2 = poi[1][0];
y2 = poi[1][1];
a = 0.5 + Math.sin(tim) * 0.2 + Math.cos(tim * 11) * 0.03;
tx = x1 + (x2 - x1) * a;
ty = y1 + (y2 - y1) * a;
bem(x1, y1, tx, ty, 222, 0, a * 2);
bem(x2, y2, tx, ty, 333, 1, (1 - a) * 2);
}
function ina(sx, sy, ex, ey, kai, hai, bai) {
var a, rx, ry, x1, y1, x2, y2;
rx = (ex - sx) / 3;
ry = (ey - sy) / 3;
a = (Math.random() - 0.5) * bai;
x1 = sx + rx - ry * a;
y1 = sy + ry + rx * a;
a = (Math.random() - 0.5) * bai;
x2 = sx + rx * 2 - ry * a;
y2 = sy + ry * 2 + rx * a;
if (kai) {
ina(sx, sy, x1, y1, kai - 1, hai, bai);
ina(x1, y1, x2, y2, kai - 1, hai, bai);
ina(x2, y2, ex, ey, kai - 1, hai, bai);
} else {
hai.push(sx, sy, x1, y1, x2, y2);
}
}
function duma(sx, sy, ex, ey, kai, s) {
var a, b, c, d;
for (c = 0; c < 3; c++) {
a = [];
ina(sx, sy, ex, ey, kai, a, 1.3);
a.push(ex, ey);
ctx.beginPath();
for (b = 0; b < a.length; b += 2) ctx.lineTo(a[b], a[b + 1]);
for (d = 0; d < 3; d++) {
ctx.lineWidth = s + d * 2;
ctx.stroke();
}
}
}
function bem(x1, y1, x2, y2, col, ban, s) {
var a, b, c, d, e, f, g, x, y, px, py, max, p1, p2, len, hon, ft, ft2, grd, tm, t;
ctx.strokeStyle = ctx.fillStyle = "hsla(" + col + ",60%,60%,0.3)";
grd = ctx.createRadialGradient(x1, y1, 0, x1, y1, futosa * 70);
grd.addColorStop(0, "hsla(" + col + ",60%,60%,0.9)");
grd.addColorStop(1, "hsla(" + col + ",60%,60%,0.0)");
ctx.fillStyle = ctx.strokeStyle = grd;
pika(x1, y1, futosa * 70);
x = x1 + (x2 - x1) * 0.97;
y = y1 + (y2 - y1) * 0.97;
grd = ctx.createRadialGradient(x, y, 0, x, y, futosa * 100);
grd.addColorStop(0, "hsla(" + col + ",60%,60%,0.4)");
grd.addColorStop(1, "hsla(" + col + ",60%,60%,0.0)");
ctx.fillStyle = ctx.strokeStyle = grd;
pika(x, y, futosa * 100);
ctx.strokeStyle = ctx.fillStyle = "hsla(" + col + ",60%,60%,0.1)";
duma(x1, y1, x2, y2, 6, s * futosa * 2);
ctx.strokeStyle = ctx.fillStyle = "hsla(" + col + ",60%,60%,0.15)";
ft = ((count / gmax * 5 + ban / 2) % 1) * 1.4 - 0.2;
ban += x1 * 13 + y1 * 23;
a = Math.atan2((y2 - y1), (x2 - x1));
px = Math.cos(a);
py = Math.sin(a);
max = 100;
hon = 100;
for (g = 0; g < hon; g++) {
tm = g / hon * Math.PI;
ft2 = ((count / gmax * 3 + g / hon + ban / 3) % 1) * 1.4 - 0.2;
t = ((count / gmax + g / hon * 7) % 1) * 3 - 1;
p1 = [];
for (a = 0; a < max; a++) {
b = t + a / max;
if (b < 0 || b > 1) continue;
c = Math.sin(tim + tm * 3 + b * 7) * 20 +
Math.sin(tim * 2 + tm * 7 + g * 2 - b * 17) * 15 +
Math.sin(tim * 3 + tm * 11 + g * 3 - b * 37) * 5;
c *= futosa * s;
e = 1;
if (b < 0.2) e = b / 0.2;
if (b > 0.8) e = (1 - b) / 0.2;
f = 0;
if (b > ft && b < ft + 0.2) {
f = (ft + 0.2 - b);
e += (ft + 0.2 - b) / 0.2;
}
if (b > ft2 && b < ft2 + 0.2) {
f += (ft2 + 0.2 - b) / 2;
e += (ft2 + 0.2 - b) / 0.3;
}
