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

我已经用画布创建了一条道路。我希望在中间添加线条。此外，线条之间的宽度、高度和间距也必须相应增加

<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++;
    }

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var j=0；
对于（变量i=canvas.height*.30；i

但我无法通过上述代码实现。请帮我解决这个问题。

---

更新：以下解决方案也考虑了每条线的倾斜，因此它不会绘制矩形，而是使用多边形。 在这里拉小提琴：

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
clearRect（0,0，canvas.width，canvas.height）；
var j=0；
var y=0；
对于（var j=1；y

请注意，为了改进设计，了解每个变量的作用是很重要的

• j是线性递增的，只是一个计数器，直到你们的高度达到y为止
• w、 宽度随着j的每次迭代而线性增加
• h、 高度始终为宽度的5倍（如果需要，请更改该系数）
• x、 该位置偏离中心宽度的一半
• y、 将是高度的倍数，以有效容纳空白，我认为它为2.5，但可以调整

---

帮你做什么？它的数学？你知道如何在画布上画画，其余部分都是相当基础的数学。我认为他不必担心倾斜，他可以从透视角度变换整个画布元素以自然地获得那种效果。@mystrdat，前提是道路是画布上唯一的画

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

    }