javascript - 在 Javascript 中绘制多条三 Angular 形线

Question

我想用普通 JS 在 HTML Canvas 上绘制 3 条三 Angular 形。 我将 Canvas 分为 1/8*cw (canvas widht) 宽列和 1/8*ch (canvas hight) 高行。我知道 2/8 与 1/4 相同，但在我完成我的代码之前，我想保持这样。这就是为什么我用看到的数字计算的原因。我将图片分成三行三 Angular 形，每行中的三 Angular 形数量不断增加。为此，我选择了嵌套循环来解决整个问题。但由于某种原因，它不起作用，最后一个三 Angular 形不存在。

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

var cw = canvas.width;
var ch = canvas.height;
var k = 1;
var x = 5 / 8 * cw;
var y = -1 / 8 * ch;

for (var i = 0; i < 3; i++) {
  context.beginPath();
  context.moveTo(x -= 1 / 8 * cw, y += 2 / 8 * ch);
  for (var j = 0; j < k; j++) {
    context.moveTo(x += j * (2 / 8 * cw), y);
    context.lineTo(x - 1 / 8 * cw, y + 2 / 8 * ch);
    context.lineTo(x + 1 / 8 * cw, y + 2 / 8 * ch);
    context.closePath();
    if (y === 1 / 8 * ch) {
      context.fillStyle = 'rgb(255, 77, 77)';
    } else if (y === 3 / 8 * ch) {
      context.fillStyle = 'rgb(0, 179, 60)';
    } else {
      context.fillStyle = 'rgb(0, 153, 153)';
    }
    context.fill();
    console.log('i: ' + i + ' j: ' + j + ' k: ' + k);
  }
  k += 1;
}

<canvas id="myCanvas" height="300" width="450" style="border: 1px solid black"></canvas>

Answer 1

这段代码很难阅读，也很难调试。将像 x += ... 这样的改变值的方程放在参数中是不好的做法，您应该不惜一切代价避免它。这是您的代码失败的主要原因。

这是您的固定密码:https://jsfiddle.net/9oqmx3cL/你将不得不比较发生了什么变化。

我知道您没有要求进行代码审查，不过，您可能最好通读下面这段重写的代码并获取一些提示。当然，它只以一种颜色绘制。如果您将颜色作为参数传递给基于行变量为 0、1、2 的三 Angular 形函数，那么该任务添加起来非常简单，无需一些复杂的公式，如 if (y === 3/8 * ch ) {...} 做同样的事情。当您开始添加第 4、5 行时，公式逻辑变得更加困惑。

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

var cw = canvas.width;
var ch = canvas.height;


var maxRows = 3;

var width  = 1 / 8 * ch;
var height = 1 / 8 * ch;

var yPos = 0;

var halfTriangleWidth = width / 2;
var middleOfCanvasX   = cw / 2;

for (var row = 0; row < maxRows; row++) {
    var xPos = middleOfCanvasX - (row * halfTriangleWidth);
    for (var col = 0; col <= row; col++) {
       plotTriangle(context, xPos, yPos, width, height);
       xPos += width;
    }
    yPos += height;
}

function plotTriangle(context, x, y, w, h) {
  context.beginPath();
  context.fillStyle = 'rgb(0, 153, 153)';

  context.moveTo(x, y);
  context.lineTo(x + w / 2, y + h);
  context.lineTo(x - w / 2, y + h);
  context.closePath();  
  context.fill();
}