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，也可以（并且我可以更轻松地清除画布）在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.stroke（）（这是因为你使用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（）可能更容易阅读和理解。
我要做的是使用我认为最容易理解的那个，如果你的应用程序遇到性能问题，那么我会开始寻找改进的东西。

fillrect（）;只生成一次，甚至x和y都是动态的

1 个答案: