javascript - 填充矩形()；即使 x 和 y 是动态的，也只生成一次

Question

即使 x 和 y 值不断变化并且 fillrect()，也只绘制了一个矩形；正在循环中。

    var canvas=document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var n = 0;
    a = [0,0,0.85,0.2,-0.15],
    b = [0,0,0.04,-0.26,0.28],
    c = [0,0,-0.04,0.23,0.26],
    d = [0,0.16,0.85,0.22,0.24],
    f = [0,1.6,1.6,1.6,0.44],
    x = 1,
    y = 1;
setInterval(function(){ 

ctx.translate(1400/2, 500/2);
i = Math.random();
if (i <= 0.02 ) n = 1;
else if (i > 0.02 && i < .89) n = 2;
else if(i > .89 && i < .96) n = 3;
else n = 4;
x = a[n] * x + b[n] * y;
y = c[n] * x + d[n] * y + f[n];
ctx.beginPath();
ctx.fillRect( x, y, 1, 1 ); 
ctx.stroke();
console.log(x, y);
}, 50);

http://jsfiddle.net/13huvske/

Answer 1

我认为你的问题是你在循环的每个周期中设置 ctx.translate ，这将为每个周期添加原点偏移量。 您可以在循环之外设置 ctx.translate 一次，或者您可以(并且我使清除 Canvas 更容易)在 ctx.translate() 之前执行 ctx.save() ，并在循环结束时执行 ctx.restore() .

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var n = 0,
a = [0, 0, 0.85, 0.2, -0.15],
b = [0, 0, 0.04, -0.26, 0.28],
c = [0, 0, -0.04, 0.23, 0.26],
d = [0, 0.16, 0.85, 0.22, 0.24],
f = [0, 1.6, 1.6, 1.6, 0.44],
x = 1,
y = 1;
setInterval(function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(canvas.width / 2, canvas.height / 2);
    i = Math.random();
    if (i <= 0.02)
        n = 1;
    else if (i > 0.02 && i < .89)
        n = 2;
    else if (i > .89 && i < .96)
        n = 3;
    else
        n = 4;
    x = a[n] * x + b[n] * y;
    y = c[n] * x + d[n] * y + f[n];
    ctx.fillStyle = 'red';
    ctx.fillRect(x, y, 10, 10);
    ctx.restore();
}, 50);

或查看http://jsfiddle.net/72z0f01b/2/

抱歉，我将您的矩形设置为 10x10，而不是 1x1，并设置为红色，以便更容易查看。 我还添加了 ctx.clearRect() 并删除了 ctx.lines() (因为您使用 fillRect() ，所以不需要)，并且我从 Canvas 对象中获取宽度和高度，而不是对其进行硬编码(这是一个首选项事情，它会在不改变它的情况下工作，但现在你知道这是一个选项:))

还有什么问题吗？ :)

更新:正如 GameAlchemist 在他的评论中提到的:
您也可以这样做ctx.translate(-(canvas.width / 2), -(canvas.height / 2));而不是 save() 和 Restore()。

它看起来像这样:
setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.translate(canvas.width / 2, canvas.height / 2); // Your render code ctx.translate(-(canvas.width / 2), -(canvas.height / 2)); }, 50);

您可以使用您最喜欢的版本，后一个版本可能计算速度更快，但是 save() 和 Restore() 可能更容易阅读和理解。
我要做的就是使用我认为最容易理解的一个，如果您的应用程序遇到性能问题，那么我会开始寻找需要改进的地方。