javascript - HTML5 Canvas 上的随机多边形形状

Question

我对 canvas 元素还是很陌生，我正在尝试在 canvas 元素上的随机位置绘制随机多边形(三 Angular 形)。但我很难理解它。

到目前为止我已经有了这个，它很好地绘制了一个 ploygon，但是我完全不知道如何添加随机性和定位

var c = document.getElementById('c');
if (c.getContext) {
  c2 = c.getContext('2d');
  var width = c2.width;
  var height = c2.height;
  var maxAmount = 20;

  for (i = 0; i < maxAmount; i++) {
    var polySize = 50;
    var posx = (Math.random() * (width - polySize)).toFixed();
    var posy = (Math.random() * (height - polySize)).toFixed();

    c2.fillStyle = '#f00';
    c2.beginPath();
    c2.moveTo(posx, posy);
    c2.lineTo(100, 50);
    c2.lineTo(50, 100);
    c2.lineTo(0, 90);
    c2.closePath();
    c2.fill();
  }
}

<canvas id="c" \>

Answer 1

您正在尝试获取 Canvas 的 Context2D 属性的宽度和高度属性，它们都返回了 undefined。
您需要的是 canvas 元素的宽度和高度属性。

现在，由于您对其他答案的评论，如果您需要移动整个形状，只需使用保存在 posx 和 posy 变量中的第一个点，然后调整其他点的位置:

var c = document.getElementById('c');
c.width =500;
c.height= 500;
if (c.getContext) {
  var c2 = c.getContext('2d');
  var width = c.width;
  var height = c.height;
  var maxAmount = 20;

  for (var i = 0; i < maxAmount; i++) {
    var polySize = 50;
    var posx = (Math.random() * (width - polySize));
    var posy = (Math.random() * (height - polySize));

    c2.fillStyle = '#f00';
    c2.beginPath();
    c2.moveTo(posx, posy);
    c2.lineTo(posx+100, posy+50);
    c2.lineTo(posx+50,posy+100);
    c2.lineTo(posx+0, posy+90);
    c2.closePath();
    c2.stroke();
    c2.fill();

  }
}

<canvas id="c"><\canvas>