Javascript 如何使用此JS函数的参数?

Javascript 如何使用此JS函数的参数?,javascript,function,html5-canvas,Javascript,Function,Html5 Canvas,我有下面的函数,它以像素字母的形式打印出几个正方形。现在你会注意到我只有字母a和b。最后,我将添加所有字符,但首先我需要知道如何编写此函数,以便我可以将参数传递给它,它将打印出形状,使其看起来像您作为参数传递到函数中的字母。下面是现在的函数: function make_letter() { var c = document.getElementById("myCanvas"); var context = c.getContext("2d"); var w = pars

我有下面的函数,它以像素字母的形式打印出几个正方形。现在你会注意到我只有字母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(){
var c=document.getElementById(“myCanvas”);
var context=c.getContext(“2d”);
var w=parseInt(getComputedStyle(c).width);
var h=parseInt(getComputedStyle(c).height);
var full=数学楼层(h/16);
var单位=满-0.75;
var inv={
答:[[0,2],[1,1],[1,3],[2,0],[2,2],[2,3],[2,4],[3,0],[3,4],[4,0],[4,4],
[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]]
};

对于(i=0;i
inv[param]。length
请参阅,我会在计时器启动后立即选择此作为答案。没问题!编辑以添加执行该循环的另一种方法。使用
for
循环生成索引以遍历数组没有问题,但是
array.forEach()
教你开始从函数的角度思考,这在以后的
Array.map()
Array.reduce()
中会很有用。还有一个答案看起来像是被删除了,但它提到了
context.fillStyle()
context.fill()
调用可以从循环中取出,然后执行一次。听起来是个好主意。
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();
    }
}
inv[letter].forEach(function(coord) {
   context.beginPath();
   context.rect(coord[1] * full, coord[0] * full, unit, unit); 
   context.fillStyle = 'black';
   context.fill();
});