我有点困在这个;基本上我想要发生的是网格首先以完全不透明度绘制,当网格线是画布的宽度或高度时减少到0.15不透明度。我有逆工作,但我不知道如何将其转换为我需要的。以下是重新创建问题的代码:
var bg = id('bg');
var bgCtx = bg.getContext('2d');
/* Menu Screen
------------------------------------- */
var game =
{
w:800,
h:500
};
var menu =
{
tick: 0,
gridX: 0,
gridY: 0,
active:true,
lines:
[
]
};
function GridLine(x, y, direction)
{
this.x = x;
this.y = y;
this.dimension = 0;
this.direction = direction;
}
GridLine.prototype.draw = function()
{
bgCtx.strokeStyle = 'hsla(192, 100%, 70%, ' + (this.dimension/game.h) + ')';
bgCtx.lineWidth = 1;
if (this.direction == 'vertical')
{
if (this.dimension < game.h)
{
this.dimension+=20;
}
bgCtx.beginPath();
bgCtx.moveTo(0.5 + this.x, 0);
bgCtx.lineTo(0.5 + this.x, this.dimension);
bgCtx.stroke();
bgCtx.closePath();
}
else if (this.direction == 'horizontal')
{
if (this.dimension < game.w)
{
this.dimension+=20;
}
bgCtx.beginPath();
bgCtx.moveTo(0, 0.5 + this.y);
bgCtx.lineTo(this.dimension, 0.5 + this.y);
bgCtx.stroke();
bgCtx.closePath();
}
}
function updateMenu()
{
if (menu.active)
{
bgCtx.clearRect(0,0,bg.width,bg.height);
bgCtx.fillStyle = "black";
bgCtx.fillRect(0, 0, bg.width, bg.height);
menu.tick++;
if (menu.tick % 2 == 0 && menu.gridX < game.w)
{
menu.gridX += 50;
menu.gridY += 50;
menu.lines[menu.lines.length] = new GridLine(menu.gridX, 0, 'vertical');
menu.lines[menu.lines.length] = new GridLine(0, menu.gridY, 'horizontal');
}
for (var h = 0; h < menu.lines.length; h++)
{
menu.lines[h].draw();
}
requestAnimationFrame(updateMenu);
}
else
{
cancelAnimationFrame(updateMenu);
}
}
window.addEventListener('load', function()
{
updateMenu();
}, false);
/* Helper functions
------------------------------------- */
function id(e)
{
return document.getElementById(e);
}
(function()
{
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x)
{
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element)
{
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function()
{
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id)
{
clearTimeout(id);
};
}());
问题出在GridLine.prototype.draw function
。你能给出的任何建议都很棒。
答案 0 :(得分:1)
如果我理解了你想要的东西,只需从1(完全不透明度)中减去你的值即可获得效果。
bgCtx.strokeStyle = 'hsla(192, 100%, 70%, ' + (1-this.dimension/game.h) + ')';
非常整洁的小效果,很像Tron。
<强> Live Demo 强>