Question

好的，所以我在在线代码中编写了以下代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

以下代码应生成随机圆，但画布区域始终变为空白。有谁可以帮助我吗？谢谢。这是一本名为＆＃34; HTML5 for dummies的书。

Answer 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，具体取决于浏览器）打开您的开发人员控制台，如果您单击＆＃34;控制台＆＃34;选项卡，当出现问题时，它会向您显示一堆错误。

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

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

HTML5画布随机形状

2 个答案: