gpt4 book ai didi

javascript - p5.j​​s 将不受scale()函数影响的元素添加到 Canvas 上

转载 作者:行者123 更新时间:2023-12-03 00:11:29 24 4
gpt4 key购买 nike

我正在创建一个 p5.js agar.io 风格的游戏。在我的绘图函数中,我使用 scale缩小 map 的功能,如我的 agar.io blob物体的半径增大。

function draw() {
var newzoom = 64 / blob.r;
zoom = lerp(zoom, newzoom, 0.1);
scale(zoom);
...
show_highscores();

}

在我的draw()函数我还用我的 show_highscores() 绘制标签函数,我将使用它来显示游戏中所有玩家的高分。

function show_highscores() {
textSize(12);
text("Leaderboard", blob.pos.x - 150, blob.pos.y - 80);
fill(0, 102, 153);
}

问题:由于 scale() ,我的高分标签相对于我的 Blob (始终位于屏幕中间)正在改变位置和大小。我正在我的draw()中运行功能。

问题:

有没有办法以不受 scale 影响的方式绘制我的高分标签功能。是否可以在 Canvas 上覆盖一个标签,或者为我的高分标签绘制一个额外的 Canvas 。

最佳答案

您可以使用push()pop()在绘制记分卡之前需要时恢复到基本比例的功能。像这样的事情:

function setup(){
createCanvas(200, 200);
frameRate(1);
}

function draw(){
background(50);
fill('white');
stroke(255);

push();
scale(random(0.2,3));
rect(30, 20, 50, 50);
line(0, 0, 100, 200);
pop();

stroke(0);
fill(255, 0, 0, 100);
rect(30, 20, 50, 50);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

关于javascript - p5.j​​s 将不受scale()函数影响的元素添加到 Canvas 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54706441/

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