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);

我希望螺旋像这样发展：

spiral pretended evolution

我希望能够在等式上得到高度和宽度之间的比率，因此我不需要计算画布外的点的坐标。此外，其目的是将螺旋绘图调整为画布比例。

任何帮助都将不胜感激。

Answer 1

我差点撞坏了我的浏览器。在这之前，在我伤害自己之前先做一些代码！

它计算对角线的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);

Answer 2

一位朋友帮助我处理了一个合适的解决方案。我只有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);

如何绘制矩形螺旋？

2 个答案: