HTML5 Canvas 上的随机多边形形状答案

【问题标题】：Random polygon shapes on HTML5 CanvasHTML5 Canvas 上的随机多边形形状
【发布时间】：2015-09-01 21:13:51
【问题描述】：

我对画布元素还是很陌生，我正在尝试在画布元素的随机位置绘制随机多边形（三角形）。但我很难理解它。

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

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

&lt;canvas id="c" \&gt;

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

您正在尝试获取画布的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();

  }
}

&lt;canvas id="c"&gt;&lt;\canvas&gt;

【讨论】：

噢！我是多么愚蠢。这完全有道理！谢谢！
顺便说一句，如果我能麻烦你，多边形现在都是一样的，我怎样才能在混合中添加一些随机形状？
完全没有问题，只需在每个点定义上调用Math.random()。

【解决方案2】：

这里没有设置画布宽度和高度属性。所以当在代码行后面调用代码时，它会返回 NaN

var width = c2.width;
var height = c2.height;

要获得随机位置，请尝试以下代码库

<canvas id="c" width="250" height="250" \>

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

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

【讨论】：

感谢您的回答，但您的代码不会将多边形定位在不同的位置，只是多边形的一个点。这也是我遇到的问题
问题不在于没有设置宽度和高度，而更多的是 OP 试图从 context2d 中获取未定义的那些。如果canvas对象没有定义宽高，则返回默认300*150