javascript - 如何根据网格线的宽度在带有 alpha channel 的 Canvas 中绘制网格？

Question

我有点卡在这个上面；基本上我想要发生的是首先以完全不透明度绘制网格，当网格线是 Canvas 的宽度或高度时，不透明度降低到 0.15。我有 inverse 工作，但我不确定如何将其转换为我需要的。这是重现问题的代码:

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 函数 中。您能提供的任何建议都会很棒。

Answer 1

如果我明白你想要什么，只需从 1(完全不透明)中减去你的值即可获得效果..

bgCtx.strokeStyle = 'hsla(192, 100%, 70%, ' + (1-this.dimension/game.h) + ')';

非常简洁的小效果，非常像 Tron。

Live Demo