如何根据网格线的宽度在画布上绘制带有alpha通道的网格？

Question

我有点卡在这个;基本上我想要发生的事情是，网格首先以完全不透明度绘制，当网格线是画布的宽度或高度时，网格线会降低到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。任何你可以给的建议都会很棒。

Answer 1

如果我明白你只想从1（​​完全不透明）减去你的价值得到的效果..

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

漂亮整洁的效果，非常喜欢特隆。

Live Demo