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.