所以我使用畫布和 JS 創建了一個“落雪”效果，它從螢屏上的少量開始，隨著用戶點擊的增加 - 它們被影片化為輕輕落下，一切正常，看起來很棒。
當我試圖在沒有互動性的情況下在下面添加第二個畫布但仍然有一些移動的雪效果時，問題就出現了，只是為了讓它看起來更好一點并在整個頁面中有一些連續性。在更改陣列、識別符號和函式名稱等時，我重新使用了第一個效果的代碼。
無論我嘗試什么，我似乎都無法獲得第二個影片效果。它在螢屏上獲得了正確數量的“雪花”，但它們只是靜態的。相同的影片代碼適用于第一個，所以我不明白為什么它不在第二個上。控制臺中也沒有錯誤，因為所有內容都是單獨命名的，并且可以讀取兩個陣列。我已經堅持了兩天的大部分時間，所以任何幫助都會很棒！
完美影片的頂級畫布JS：
const canvas = document.getElementById("topCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const c = canvas.getContext("2d");
function Circle(x, y, dx, dy, radius) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.draw = function() {
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
c.strokeStyle = "#E2EAFC";
c.fill();
c.fillStyle = "#EDF2FB";
c.stroke();
}
this.update = function() {
if (this.x this.radius > innerWidth ||
this.x - this.radius < 0) {
this.dx = -this.dx;
}
this.x = this.dx;
this.y = this.dy;
this.draw();
}
}
const circleArray = [];
for (i = 0; i < 100; i ) {
radius = (Math.random() * 1);
x = Math.random() * (innerWidth - radius * 2) radius;
y = Math.random() * (innerHeight - radius * 2) radius;
dx = (Math.random() - 0.1) * 0.05;
dy = (Math.random() - 0.2) * 0.1;
circleArray.push(new Circle(x, y, dx, dy, radius));
}
console.log(circleArray);
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, innerWidth, innerHeight);
for (i = 0; i < circleArray.length; i ) {
circleArray[i].update();
}
}
canvas.addEventListener('click', function() {
for (i = 0; i < 80; i ) {
radius = (Math.random() * 2);
x = Math.random() * (innerWidth - radius * 2) radius;
y = Math.random() * (innerHeight - radius * 2) radius;
dx = (Math.random() - 0.2) * 0.05;
dy = (Math.random() - 0.2) * 0.1;
circleArray.push(new Circle(x, y, dx, dy, radius));
}
});
animate();
第二個沒有：
const background = document.getElementById("backgroundEffect");
background.width = window.innerWidth;
background.height = window.innerHeight;
const b = background.getContext("2d");
function Drawing(x, y, dx, dy, radius) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.draw = function() {
b.beginPath();
b.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
b.strokeStyle = "#E2EAFC";
b.fill();
b.fillStyle = "#EDF2FB";
b.stroke();
}
this.update = function() {
if (this.x this.radius > innerWidth ||
this.x - this.radius < 0) {
this.dx = -this.dx;
}
this.x = this.dx;
this.y = this.dy;
this.draw();
}
}
const backgroundArray = [];
for (i = 0; i < 200; i ) {
radius = (Math.random() * 2);
x = Math.random() * (innerWidth - radius * 2) radius;
y = Math.random() * (innerHeight - radius * 2) radius;
dx = (Math.random() - 0.2) * 0.1;
dy = (Math.random() - 0.2) * 0.4;
backgroundArray.push(new Drawing(x, y, dx, dy, radius));
}
console.log(backgroundArray);
function animateBackground() {
requestAnimationFrame(animate);
b.clearRect(0, 0, innerWidth, innerHeight);
for (i = 0; i < backgroundArray.length; i ) {
backgroundArray[i].update();
}
}
background.addEventListener('click', function() {
for (i = 0; i < 80; i ) {
radius = (Math.random() * 2);
x = Math.random() * (innerWidth - radius * 2) radius;
y = Math.random() * (innerHeight - radius * 2) radius;
dx = (Math.random() - 0.2) * 0.1;
dy = (Math.random() - 0.2) * 0.4;
backgroundArray.push(new Circle(x, y, dx, dy, radius));
}
});
animateBackground();
它們位于不同的 JS 檔案中，除了影片本身之外，它們都可以正常讀取和執行。為了嘗試說明，我附上了兩張圖片 - 點擊前和點擊后。粒子在頂部畫布上移動，但在底部畫布上不動
uj5u.com熱心網友回復：
您確定控制臺上沒有錯誤嗎？
如果我在第二個單獨運行它們，我會得到：
message": "Uncaught ReferenceError: animate is not defined",
您在第二個影片上的代碼應該是：
function animateBackground() {
requestAnimationFrame(animateBackground);
...
但是你有：
function animateBackground() {
requestAnimationFrame(animate);
...
所以你的錯誤是兩個影片都在呼叫相同的 requestAnimationFrame 函式，而不是每個呼叫自己的函式，我沒有看到任何其他問題......
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/381520.html
標籤：javascript 动画片 帆布