2

私はこれに少し立ち往生しています。基本的に私がしたいのは、グリッドが最初に完全な不透明度で描画され、グリッド線がキャンバスの幅または高さのいずれかである場合、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ます。あなたが与えることができるどんなアドバイスも素晴らしいでしょう。

4

1 に答える 1

1

私があなたが望むものを理解しているなら、効果を得るために1（完全な不透明度）からあなたの値を引くだけです。

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

かなりきちんとした小さな効果、非常にトロンのような。

ライブデモ

于 2012-11-27T17:25:52.367 に答える