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

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，但可以调整。