Question

我用帆布创造了一条道路。我希望在中间添加线条。线条之间的宽度，高度和间隙也必须相应增加。

<canvas id="myCanvas" width="578" height="500"></canvas>

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var j = 0;
    for(var i = canvas.height*.30; i< canvas.height; i=i+20){
        context.beginPath();
        context.rect(canvas.width*.50, i-j, 3+j, 10+(j*2));
        context.fillStyle = '#000000';
        context.fill();
        j++;
    }

但是我无法通过上面的代码来实现它。请帮我解决这个问题。 jsfiddle

Answer 1

更新：以下解决方案也考虑了每条线的偏斜，因此它不会绘制矩形，而是使用多边形。在这里摆弄：https://jsfiddle.net/tcdLf0xu/4/

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0,0,canvas.width,canvas.height);
var j = 0;
var y = 0;
    for(var j = 1; y < canvas.height; j++){

        context.beginPath();
        spacing = 2.5
        w = j+1;
        h = 4*w;
        x = canvas.width*.50 - w/2;
        y = y + spacing*h;  
        context.rect(x,y ,w,h );
        context.moveTo(x,y);
        context.lineTo(x+w,y);
        context.lineTo(x+w+1/spacing,y+h);
        context.lineTo(x-1/spacing,y+h);
        context.lineTo(x,y);
        context.closePath();
        context.fillStyle = '#000000';
        context.fill(); 

    }

请注意，了解每个变量正在做什么以改进设计非常重要。

j线性递增，只是一个计数器，直到你的高度达到y。
w，随着j的每次迭代，宽度线性增加。
h，高度始终是宽度的5倍（如果需要，可以更改该因子）
x，位置偏离中心宽度的一半。
y，将是高效的倍数，以便有效地容纳空白区域，我把它当作2.5但可以调整。

如何使用HTML5画布创建道路线

1 个答案: