Okay, so I wrote the following code in an online code:
<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<script>
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();
}
</script>
</head>
</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>
</html>
The following code is supposed to generate random circles, but the canvas area always turns blank. Can someone help me, please? Thank you. This is token from a book called "HTML5 for dummies.
Aucun commentaire:
Enregistrer un commentaire