个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想编写一个简单的从右到左滚动starfield。我随机打印出了星星。现在，我如何瞄准每颗星星并随机给它一个速度(比如 1-10)并开始移动它？我还需要在每颗星星到达左边缘后将其放回右边缘。
以下是我迄今为止编写的代码:
<!DOCTYPE html>
<html>
<head>
<script>
function stars()
{
canvas = document.getElementById("can");
if(canvas.getContext)
{
ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
ctx.rect (0, 0, 400, 400);
ctx.fill();
starfield();
}
}
//print random stars
function starfield()
{
for (i=0; i<10; i++)
{
var x = Math.floor(Math.random()*399);
var y = Math.floor(Math.random()*399);
var tempx = x;
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(x, y, 3, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
}
</script>
</head>
<body onload="stars()">
<h1>Stars</h1>
<canvas id="can" width="400" height="400"style="border:2px solid #000100" ></canvas>
</body >
</html>
最佳答案
这是一个quick demo在 Codepen 上。将星星保存在数组中后，我使用 requestAnimationFrame 运行绘图代码并更新每一帧的位置。
function stars() {
canvas = document.getElementById("can");
console.log(canvas);
if (canvas.getContext) {
ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
ctx.rect(0, 0, 400, 400);
ctx.fill();
starfield();
}
}
// Create random stars with random velocity.
var starList = []
function starfield() {
for (i = 0; i < 20; i++) {
var star = {
x: Math.floor(Math.random() * 399),
y: Math.floor(Math.random() * 399),
vx: Math.ceil(Math.random() * 10)
};
starList.push(star);
}
}
function run() {
// Register for the next frame
window.requestAnimationFrame(run);
// Reset the canvas
ctx.fillStyle = "black";
ctx.rect(0, 0, 400, 400);
ctx.fill();
// Update position and draw each star.
var star;
for(var i=0, j=starList.length; i<j; i++) {
star = starList[i];
star.x = (star.x - star.vx + 400) % 400;
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(star.x, star.y, 3, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
}
stars();
run();
关于javascript - 如何制作滚动星空，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22009887/
25
4
0
我正在通过在 HTML Canvas 上开发一个小空间游戏来学习 JS。我正在尝试从随机生成的星星阵列创建 3D 星空。我有一个由 12 颗星组成的数组，是从包含 34 颗星的较大星体数组的元素中随机
注意:我找到了一个解决方案并编辑了这个例子来展示如何去做。我将采用此代码并将其移动到我的更大的应用程序中。 我编写了一个 3d 恒星图表应用程序，它接收 GAIA 恒星数据并向您显示 3d 表示。您可
我是一名优秀的程序员,十分优秀！