HTML5画布随机形状
[英]HTML5 canvas random shapes
问题描述
好的，所以我在在线代码中编写了以下代码：
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”的书中的标记。
2 个解决方案
解决方案1
0 2018-02-14 02:31:55
首先，您的身体内容没有正确包装。 当前是这样的：
</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
0 2018-02-14 02:37:17
您的问题是引用的变量和方法名称错误。 您应该使用可以验证代码的编辑器。 否则，您的代码没有错。
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>
HTML5画布上的随机多边形形状
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.