如何繪製矩形螺旋？

Question

我試圖繪製一個像素寬度線，從畫布中心開始，並隨着繪製時的畫布寬度/高度比例而變化。

var x = 0; 
var y = 0; 
var dx = 0; 
var dy = -1; 
var width = 200; 
var height = 40; 
//var i = width * height; 
var counter = 0; 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext('2d'); 



setInterval(function(){ 
    //for (i = Math.pow(Math.max(width, height), 2); i>0; i--) { 

    if ((-width/2 < x <= width/2) && (-height/2 < y <= height/2)) { 
     console.log("[ " + x + " , " + y + " ]"); 
     ctx.fillStyle = "#FF0000"; 
     ctx.fillRect(width/2 + x, height/2 - y,1,1); 
    } 

    if (x === y || (x < 0 && x === -y) || (x > 0 && x === 1-y) || (-width/2 > x > width/2) || (-height/2 > y > height/2)) { 
     // change direction 
     var tempdx = dx; 
     dx = -dy; 
     dy = tempdx; 

    } 
    counter += 1; 
    //alert (counter); 
    x += dx; 
    y += dy;  
    }, 1); 

我想螺旋演變爲這樣的：

我希望能夠得到高度和寬度的公式之間的比例，所以我不需要計算畫布外點的座標。此外，其目的是爲了將螺旋圖形調整爲畫布比例。

任何幫助，將不勝感激。

Answer 1

一位朋友幫我處理了一個合適的解決方案。我只有一個像素偏移量來解決我需要將所有繪圖向左移動一個像素的位置。

下面是實現解決方案的小提琴：http://jsfiddle.net/hitbyatruck/c4Kd6/

及以下的Javascript代碼：

var width = 150; 
var height = 50; 

var x = -(width - height)/2; 
var y = 0; 
var dx = 1; 
var dy = 0; 
var x_limit = (width - height)/2; 
var y_limit = 0; 
var counter = 0; 

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext('2d'); 

setInterval(function(){ 
    if ((-width/2 < x && x <= width/2) && (-height/2 < y && y <= height/2)) { 
    console.log("[ " + x + " , " + y + " ]"); 
     ctx.fillStyle = "#FF0000"; 
     ctx.fillRect(width/2 + x, height/2 - y,1,1); 
} 
if(dx > 0){//Dir right 
    if(x > x_limit){ 
     dx = 0; 
     dy = 1; 
    } 
} 
else if(dy > 0){ //Dir up 
    if(y > y_limit){ 
     dx = -1; 
     dy = 0; 
    } 
} 
else if(dx < 0){ //Dir left 
    if(x < (-1 * x_limit)){ 
     dx = 0; 
     dy = -1; 
    } 
} 
else if(dy < 0) { //Dir down 
    if(y < (-1 * y_limit)){ 
     dx = 1; 
     dy = 0; 
     x_limit += 1; 
     y_limit += 1; 
    } 
} 
counter += 1; 
//alert (counter); 
x += dx; 
y += dy;  
}, 1); 

Answer 2

我幾乎崩潰了我的瀏覽器試圖。在這裏，在我傷害自己之前，先準備一些代碼

它計算y = f（x）爲對角線，y2 = f（x）爲對角線，然後在需要時檢查我們是否高於或低於對角線。

var x = 0; 
var y = 0; 
var dx = 0; 
var dy = -1; 
var width = 200; 
var height = 40; 
//var i = width * height; 
var counter = 0; 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext('2d'); 

function diag1(x) { 
    return x*height/width; 
} 
function diag2(x) { 
    return -1/diag(x); 
} 

setInterval(function(){ 
    //for (i = Math.pow(Math.max(width, height), 2); i>0; i--) { 

    if ((-width/2 < x && x <= width/2) && (-height/2 < y && y <= height/2)) { 
     console.log("[ " + x + " , " + y + " ]"); 
     ctx.fillStyle = "#FF0000"; 
     ctx.fillRect(width/2 + x, height/2 - y,1,1); 
    } 

    if (dx == 0) { 
     if (dy == 1) { 
      // moving up 
      if (y >= diag1(x)) { 
       // then move left 
       dy = 0; 
       dx = -1; 
      } 
     } 
     else { 
      // moving down 
      if (y <= diag2(x)) { 
       // then move right 
       dy = 0; 
       dx = 1; 
      } 
     } 
    } 
    else { 
     if (dx == 1) { 
      // moving right 
      if (y <= diag1(x)) { 
       // then move up 
       dy = 1; 
       dx = 0; 
      } 
     } 
     else { 
      // moving left 
      if (y <= diag2(x)) { 
       // then move down 
       dy = -1; 
       dx = 0; 
      } 
     } 
    } 

    counter += 1; 
    //alert (counter); 
    x += dx; 
    y += dy;  
}, 1);