我正在尝试从阵列生成一个不同大小的花，目前当点击它添加一个新的花，但也改变了所有当前的花大小，id喜欢添加一个花，它是一个不同的大小彼此花，继承人代码......
document.body.onload = setupCanvas();
function setupCanvas() {
var canvas = document.getElementById("garden");
var xPositions;
var yPositions;
var colours;
var speed;
var size;
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
xPositions = [];
yPositions = [];
colours = [];
speed = [];
size = randomSize();
for (var i = 0; i < 20; i++) {
xPositions.push(Math.random() * 500);
yPositions.push(Math.random() * 500);
colours.push(randomColour());
colours.push(randomColour());
speed.push(randomSpeed());
}
window.setInterval(draw, 50);
}
function randomColour() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
}
function randomSpeed() {
return Math.floor(Math.random() * 8 + 1);
}
function randomSize() {
return Math.floor(Math.random() * 30 + 5);
}
function draw(x, y, s) {
ctx.fillStyle = "rgb(210, 200, 255)";
ctx.rect(1, 1, 500, 500, );
ctx.fill();
for (var i = 0; i < xPositions.length; i++) {
ctx.fillStyle = colours[i];
ctx.beginPath();
ctx.arc(xPositions[i] - size, yPositions[i] - size, size * 1.35, 0,
Math.PI * 2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(xPositions[i] - size, yPositions[i] + size, size * 1.35, 0,
Math.PI * 2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(xPositions[i] + size, yPositions[i] - size, size * 1.35, 0,
Math.PI * 2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(xPositions[i] + size, yPositions[i] + size, size * 1.35, 0,
Math.PI * 2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = colours[i + 1];
ctx.arc(xPositions[i], yPositions[i], size, 0, Math.PI * 2, false);
ctx.fill();
if (yPositions[i] > 600) {
yPositions[i] = Math.random() * -350;
} else {
yPositions[i] += speed[i];
}
}
}
document.getElementById("garden").addEventListener("click", addFlower);
function addFlower(e) {
size = randomSize();
xPositions.push(e.offsetX);
yPositions.push(e.offsetY);
colours.push(randomColour());
colours.push(randomColour());
speed.push(randomSpeed());
}
document.getElementById("remove").addEventListener("click", removeFlower);
function removeFlower() {
xPositions.splice(0, 1);
yPositions.splice(0, 1);
colours.splice(0, 1);
speed.splice(0, 1);
}
}
和HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>52DA session 5</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
<div id="container">
<h1 id="firstHeading" class="blueTxt">Arrays</h1>
<canvas id="garden" width="500" height="500">
<p>This example requires a browser that supports the
<a href="http://www.w3.org/html/wg/html5/">HTML5</a> canvas feature.</p>
</canvas>
<form>
<input type="button" id="remove" onclick="" value="Remove Flower" />
</form>
<br />
</div>
<script src="../js/flower_script.js"></script>
</body>
</html>
非常感谢先进！
你对size的处理方式与x，y或speed特征不同。有size被理解为所有花朵共享的全局变量。
您需要创建一个数组size并应用与其余花属性相同的逻辑。
size = [];
for (var i = 0; i < 20; i++) {
xPositions.push(Math.random() * 500);
yPositions.push(Math.random() * 500);
colours.push(randomColour());
colours.push(randomColour());
speed.push(randomSpeed());
size.push(randomSize()); // Push a random size number to the array
}
现在在函数draw中，访问size，就像访问x或y一样：
function draw(x, y, s) {
// skipped ...
for (var i = 0; i < xPositions.length; i++) {
ctx.fillStyle = colours[i];
ctx.beginPath();
ctx.arc(xPositions[i] - size[i], yPositions[i] - size[i], size[i] * 1.35, 0,
Math.PI * 2, false);
// skipped ...
最后，addFlower函数也应该与上面的模式一致：
function addFlower(e) {
xPositions.push(e.offsetX);
yPositions.push(e.offsetY);
colours.push(randomColour());
colours.push(randomColour());
speed.push(randomSpeed());
size.push(randomSize()); // Push a random size number to the array
}