我一直試圖讓多滴出現,但我似乎無法讓他們進入,除非我硬編碼每一個,因爲畫布保持刷新drawover功能,我想用一個數組,但我想我不知道如何應用它。如何在製造商功能中使用多次編碼而無需編碼?
var ALLOB = {
speed: 3,
recwidth: 5,
recheight: 5,
minvalue: 100,
maxvalue: 900,
lifetime: 10,
xpos: 10,
ypos: 10
};
function rand(min, max) {
"use strict";
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var canvas = document.querySelector("#make");
var ctx = canvas.getContext("2d");
function setCanvasWidth() {
"use strict";
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
setCanvasWidth();
function paintover() {
'use strict';
ctx.fillStyle = "rgba(0, 0, 0, 0.12)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function fall() {
'use strict';
ALLOB.ypos = ALLOB.ypos + ALLOB.speed;
if (ALLOB.ypos > canvas.height - ALLOB.lifetime) {
ALLOB.ypos = 10;
}
}
function drawdrop(x, y) {
'use strict';
ctx.fillStyle = "#1cbc61";
ctx.fillRect(ALLOB.xpos + x, ALLOB.ypos + y, ALLOB.recwidth, ALLOB.recheight);
}
function maker() {
"use strict";
drawdrop(400, 10);
}
function animate() {
"use strict";
paintover();
maker();
fall();
}
setInterval(animate, 30);
canvas {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
<canvas id="make"></canvas>
你有沒有嘗試使用ALLOB對象的數組均與至少不同的XPOS/ypos?我做了 – gotomanners
,但它在畫布上創建了隨機點。我看了一個人的代碼筆,將其作爲一個學習項目,但我不明白他是如何使陣列工作。這是鏈接到codepen http://codepen.io/jalabkhan/pen/bgNavG – user2777173
請參閱下面的答案。基本上你的製造商功能應該是產生雨滴並將它們存儲在一個陣列中。 – gotomanners