HTML5画布上的随机多边形形状

Question

我对canvas元素仍然很陌生，我试图在canvas元素上的随机位置绘制随机多边形（三角形）。 但是我很难解决这个问题。

到目前为止，我已经掌握了很好的方法，但是如何添加随机性和位置完全使我难以理解

 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

您正在尝试获取画布的Context2D属性的width和height属性，它们均返回undefined 。
相反，您需要的是canvas元素的width和height属性。

现在，由于对对方的回答您的意见，如果你需要移动的整体造型，只是利用你保存了第一点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> 

Answer 2

此处未设置画布的width和height属性。 因此，当在代码行之后调用代码时，它返回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();
  }
}