如何使用这个JS函数的参数?

时间:2015-04-20 02:59:17

标签: javascript function html5-canvas

我有以下功能,它以像素字母的形状打印出几个正方形。现在你注意到我只有字母a和b。最后我将添加所有字符,但首先我需要知道如何编写此函数以便我可以将参数传递给它,并且它将打印出的形状看起来就像传递给函数的字母一样参数。这是现在的功能:

function make_letter() {
    var c = document.getElementById("myCanvas");
    var context = c.getContext("2d");
    var w = parseInt(getComputedStyle(c).width);
    var h = parseInt(getComputedStyle(c).height);
    var full = Math.floor(h / 16);
    var unit = full - 0.75;
    var inv = {
        a: [[0, 2], [1, 1], [1, 3], [2, 0], [2, 1], [2, 2], [2, 3], [2, 4], [3, 0], [3, 4], [4, 0], [4, 4]],
        b: [[0, 0], [0, 1], [0, 2], [0, 3], [1, 0], [1, 4], [2, 0], [2, 1], [2, 2], [2, 3], [3, 0], [3,4], [4,0], [4,1], [4,2], [4,3]]
    };
    for (i = 0; i <= inv.b.length; i++) {
        var x = inv.b[i][1] * full;
        var y = inv.b[i][0] * full;
        context.beginPath();
        context.rect(x, y, unit, unit); 
        context.fillStyle = 'black';
        context.fill();
    }
}

我想用make_letter('a');调用该函数并让它打印一个与您通过的字母相匹配的字母,但在函数中的某些点我不知道如何合并参数变量正确。就像在这一行:for (i = 0; i <= inv.b.length; i++) {我怎么告诉它使用inv.param.length假设&#39; param&#39;是传递给函数的参数变量的名称吗?

这是原始函数的小提琴:http://jsfiddle.net/po74m2ut/

1 个答案:

答案 0 :(得分:3)

function make_letter(letter) {
    ...
    for (i = 0; i <= inv[letter].length; i++) {
        var x = inv[letter][i][1] * full;
        var y = inv[letter][i][0] * full;
        context.beginPath();
        context.rect(x, y, unit, unit); 
        context.fillStyle = 'black';
        context.fill();
    }
}

在我的上一个回答中,我几乎解释了这个案例 - 我猜我应该有!这是您实际想要使用object[property]形式的引用而不是object.property ...当属性的实际名称存储在变量中时的时间。

编写该循环的另一种方法是:

inv[letter].forEach(function(coord) {
   context.beginPath();
   context.rect(coord[1] * full, coord[0] * full, unit, unit); 
   context.fillStyle = 'black';
   context.fill();
});