Question

我试图编写一个用canvasNum填充背景颜色的画布的函数。每个画布将按顺序命名（knobCanvas1，knobCanvas2，knobCanvas3等）。上下文：我制作了一些GUI旋钮来控制Web应用程序中的一些参数，并在几个画布上绘制它们。

这是我的一些knobs.js：

function initKnobs(canvasses)
{
    canvasNum = canvasses;
}

function drawKnobs()
{
    //draw background for <canvasNum> canvasses
    var knobBGCanvas = document.getElementById("knobCanvas1");
    var knobBGContext = knobBGCanvas.getContext("2d");
    knobBGContext.fillStyle = "#333333";
    knobBGContext.fillRect(0, 0, knobBGCanvas.width, knobBGCanvas.height);

    if(canvasNum > 1)
    {
        knobBGCanvas = document.getElementById("knobCanvas2");
        knobBGContext = knobBGCanvas.getContext("2d");        
        knobBGContext.fillStyle = "#333333";
        knobBGContext.fillRect(0, 0, knobBGCanvas.width, knobBGCanvas.height);
    }
    if(canvasNum > 2)
    {
        knobBGCanvas = document.getElementById("knobCanvas3");
        knobBGContext = knobBGCanvas.getContext("2d");
        knobBGContext.fillStyle = "#333333";
        knobBGContext.fillRect(0, 0, knobBGCanvas.width, knobBGCanvas.height);
    }
    if(canvasNum > 3)
    {
        knobBGCanvas = document.getElementById("knobCanvas4");
        knobBGContext = knobBGCanvas.getContext("2d");
        knobBGContext.fillStyle = "#333333";
        knobBGContext.fillRect(0, 0, knobBGCanvas.width, knobBGCanvas.height);
    }
    if(canvasNum > 4)
    {
        knobBGCanvas = document.getElementById("knobCanvas5");
        knobBGContext = knobBGCanvas.getContext("2d");
        knobBGContext.fillStyle = "#333333";
        knobBGContext.fillRect(0, 0, knobBGCanvas.width, knobBGCanvas.height);
    }
    if(canvasNum > 5)
    {
        knobBGCanvas = document.getElementById("knobCanvas6");
        knobBGContext = knobBGCanvas.getContext("2d");
        knobBGContext.fillStyle = "#333333";
        knobBGContext.fillRect(0, 0, knobBGCanvas.width, knobBGCanvas.height);
    } 

    <actually draw the knobs>
}

所以在主程序中我们调用

initKnobs(x);

然后

drawKnobs();

它应该用灰色背景填充x个画布。

问题是这不是一般解决方案，如果我们想要使用7个画布怎么办？

Answer 1

我建议将元素ID列表或NodeList传递给函数，使其完全可重用并迭代该列表。

/**
 * @param {NodeList} nodes
 */
function drawKnobs(nodes) {
    var currentContext;

    for(var i = nodes.length - 1; i > 0; i--) {
        currentContext = nodes[i].getContext("2d");
        currentContext.fillStyle = "#333333";
        currentContext.fillRect(0, 0, nodes[i].width, nodes[i].height);

        // <actually draw the current knob (nodes[i]) 
    }
}

var myKnobs = document.querySelectorAll("#knobCanvas1, #knobCanvas2, #knobCanvas3, #knobCanvas4, #knobCanvas5, #knobCanvas6");
drawKnobs(myKnobs);

我怎样才能概括这个＆＃34; fill-x-canvass＆＃34;码？

1 个答案: