gpt4 book ai didi

javascript - JS 粒子(星星)在 Chrome 中工作,但在 Firefox 中不起作用

转载 作者:行者123 更新时间:2023-12-03 10:19:20 28 4
gpt4 key购买 nike

我制作了一些闪烁的随机星星粒子,由于某种原因它无法在 Firefox 上运行,我可以渲染出我的图像,但星星没有渲染。我也没有错误消息。

我把它发送给一个 friend ,由于某种原因,它在他的 chrome 浏览器中也不起作用,但在我的 chrome 浏览器上它可以工作,只是火狐不行,我完全无能为力,因为我在这两个浏览器中都没有错误报告。将不胜感激任何帮助:)

作为旁注,我渲染这样的图像只是为了表明由于某种原因它们会渲染但不会渲染星星,通常我会有一个数组和几个 for 循环,但现在我想得到星星渲染。谢谢。

编辑:我只在我提到的这两个浏览器中进行了测试。

  var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");

var stars = [],
numberOfStars = 200,
state = "town",
tileMap = new Image();

tileMap.src = "images/tileMap.png";

function Star() {
this.x = Math.random() * window.innerWidth;
this.y = Math.random() * window.innerHeight;
this.size = Math.random() * 3;
this.alpha = Math.random();
this.counter = 0;
this.draw = function() {
this.counter++;

if (this.counter == 10) {
var decrease = false;

//check the brightness
if(this.alpha >= 1) {
decrease = true;
} else if (this.alpha <= 0) {
decrease = false;
}

//change brightness
if(decrease) {
this.alpha = 0.4;
} else {
this.alpha += 0.1;
}

//reset counter
this.counter = 0;
}

//draw star
context.fillStyle = "rgba(255,255,255," + this.alpha + ");";
context.fillRect(this.x, this.y, this.size, this.size);
}
}

function loop() {
//que next frame
window.requestAnimationFrame(loop);

//set canvas size to window
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;

//clear screen, set black background
context.fillStyle = "black";
context.fillRect(0, 0, window.innerWidth, window.innerHeight);

//add stars
for(i = 0; i < stars.length; i++) {
stars[i].draw();

//draw relavent map
context.drawImage(tileMap, 64, 64, 64, 128);
context.drawImage(tileMap, 64*2, 64, 64, 128);
context.drawImage(tileMap, 64*3, 64, 64, 128);
context.drawImage(tileMap, 64, 64*2, 64, 128);
context.drawImage(tileMap, 64*2, 64*2, 64, 128);
context.drawImage(tileMap, 64*3, 64*2, 64, 128);
}
}

window.onload = function() {
//create stars
for (i = 0; i < numberOfStars; i++) {
stars.push(new Star);
}

//request first frame
window.requestAnimationFrame(loop);

console.log("running...");
}

最佳答案

颜色字符串不是命令,因此删除 ;

更正这个:

context.fillStyle = "rgba(255,255,255," + this.alpha + ");";

对此:

context.fillStyle = "rgba(255,255,255," + this.alpha + ")";

关于javascript - JS 粒子(星星)在 Chrome 中工作,但在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29718763/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com