HTML5 画布随机形状答案

【问题标题】：HTML5 canvas random shapesHTML5 画布随机形状
【发布时间】：2018-07-24 12:31:32
【问题描述】：

好的，所以我在网上写了如下代码：

window.onload = function() {
  var canvas = documentById("canvasArea");
  var context = canvas.getContex("2d");

  var numCircles = 500;
  var maxRadius = 20;
  var minRadius = 3;
  var color = ["red", "orange", "yellow", "green", "blue", "purple", "black", "silver", "gold", "azure", "maroon", "bisque", "pink", "navy", "lime", "cyan", "crimson", "fuschia", "teal", "olive"];
  var numColors = colors.length;

  for (var n = 0; n < numCircles; n++) {
    var xPos = Math.random() * canvas.width;
    var yPos = Math.random() * canvas.height;
    var radius = minRadius + (Math.random() * (maxRadius - minRadius));
    var colorIndex = Math.random() * (numColors - 1);
    colorIndex = Math.round(colorIndex);
    var color = colors[colorIndex];

    DrawCircle(context, xPos, yPos, radius, color);
  }
};

function drawCircle(context, xPos, yPos, radius, color) {
  var startAngle = (Math.PI / 180) * 0;
  var endAngle = (Math.PI / 180) * 360;
  context.shadowColor = "gray";
  context.shadowOffsetX = 1;
  context.shadowOffsetY = 1;
  context.shadowBlur = 5;

  context.beginPath();
  context.arc(XPos, yPos, radius, startAngle, endAngle, false);
  context.fillStyle = color;
  context.fill();
}

<div style="width:500px; height:150px; margin:0 auto; padding:5px;">
  <canvas id="canvasArea" width="500" height="150" style="border:2px solid black">
    </canvas>
</div>

以下代码应该生成随机圆圈，但画布区域始终变为空白。有人能帮助我吗？谢谢你。这是一本名为“HTML5 for dummies”的书的标记。

【问题讨论】：

标签： javascript random html5-canvas

【解决方案1】：

第一个问题，您的正文内容未正确包装。目前是这样的：

</body>
<div style="width:500px; height:150px; margin:0 auto; padding:5px;">
  <canvas id="canvasArea" width="500" height="150" style="border:2px solid black">
  </canvas>
</div>

当它应该是这样时，其他标签围绕着一个开头 <body> 和关闭 </body>

<body>
  <div style="width:500px; height:150px; margin:0 auto; padding:5px;">
    <canvas id="canvasArea" width="500" height="150" style="border:2px solid black"></canvas>
  </div>
</body>

剩下的是命名问题：

var color 应该是 var colors
documentById 应该是 document.getElementById
canvas.getContex 应该是 canvas.getContext
DrawCircle 应该是 drawCircle。编写函数时，必须使用完全相同的相同的区分大小写的名称来调用它。
context.arc(XPos 应该是 context.arc(xPos。变量也区分大小写。

最后，您可以使用 F12（或 Ctrl+Shift+I，具体取决于浏览器）打开您的开发者控制台，如果您单击“控制台”选项卡，它会在出现问题时向您显示一堆错误提示错了。

这是一个工作示例：https://codepen.io/kingdaro/pen/BYdYba?editors=0010

【讨论】：

【解决方案2】：

您的问题是您引用了错误的变量和方法名称。您应该使用验证您的代码的编辑器。否则你的代码没有问题。

window.onload = function() {
  var canvas = document.getElementById("canvasArea");
  var context = canvas.getContext("2d");

  var numCircles = 500;
  var maxRadius = 20;
  var minRadius = 3;
  var colors = ["red", "orange", "yellow", "green", "blue", "purple", "black", "silver", "gold", "azure", "maroon", "bisque", "pink", "navy", "lime", "cyan", "crimson", "fuschia", "teal", "olive"];
  var numColors = colors.length;

  for (var n = 0; n < numCircles; n++) {
    var xPos = Math.random() * canvas.width;
    var yPos = Math.random() * canvas.height;
    var radius = minRadius + (Math.random() * (maxRadius - minRadius));
    var colorIndex = Math.random() * (numColors - 1);
    colorIndex = Math.round(colorIndex);
    var color = colors[colorIndex];

    drawCircle(context, xPos, yPos, radius, color);
  }
};

function drawCircle(context, xPos, yPos, radius, color) {
  var startAngle = (Math.PI / 180) * 0;
  var endAngle = (Math.PI / 180) * 360;
  context.shadowColor = "gray";
  context.shadowOffsetX = 1;
  context.shadowOffsetY = 1;
  context.shadowBlur = 5;

  context.beginPath();
  context.arc(xPos, yPos, radius, startAngle, endAngle, false);
  context.fillStyle = color;
  context.fill();
}

<div style="width:500px; height:150px; margin:0 auto; padding:5px;">
  <canvas id="canvasArea" width="500" height="150" style="border:2px solid black">
    </canvas>
</div>

【讨论】：