Javascript 如何使用此JS函数的参数?
我有下面的函数,它以像素字母的形式打印出几个正方形。现在你会注意到我只有字母a和b。最后,我将添加所有字符,但首先我需要知道如何编写此函数,以便我可以将参数传递给它,它将打印出形状,使其看起来像您作为参数传递到函数中的字母。下面是现在的函数: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
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;iinv[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();
});