fillrect（）;只生成一次，即使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，或者你可以（並且我更容易清除畫布）在ctx.translate（）和ctx.restore（）之前做ctx.save（）循環。

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/

對不起，我做你的矩形10×10，而不是1x1的紅色，使之更容易看到。 我還添加了一個ctx.clearRect（）並刪除了ctx.stroke（）（這是因爲您使用fillRect（），這是不需要的），我從畫布對象取出寬度和高度，而不是硬編碼它（這是一個偏好的事情，它將工作而不會改變，但現在你知道這是一個選項:)）

還有其他問題？ :)

更新：作爲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（）和恢復（）可能更容易閱讀並理解。
我會做的是使用我認爲最容易理解的一個，如果你的應用程序遇到性能問題，那麼我會開始尋找改進的東西。