gpt4 book ai didi

javascript - 在 Canvas 内绘制的弹跳球,javascript

转载 作者:行者123 更新时间:2023-11-28 06:12:26 26 4
gpt4 key购买 nike

function refBalls(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var circles = [{x:40,y:100,r:20,color:'black',vx:5,vy:10}]
function draw(){
ctx.beginPath();
ctx.arc(circles[0].x, circles[0].y, circles[0].r, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
if( (circles[0].x + circles[0].r + circles[0].vx > c.width + c.style.left) || (circles[0].x - circles[0].r + circles[0].vx < c.style.left) ){
circles[0].vx = -circles[0].vx;
}
circles[0].x += circles[0].vx;
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);}

我能看到球在移动,但我看到的是它之前的位置。我应该看到一个球在移动,而不是在 Canvas 上看到一条像球画一样的 strip 。有人能帮我吗? this is what I'm seeing in my browser

最佳答案

每次绘制框架时都需要清除 Canvas 。这与视频游戏将内容渲染到屏幕上的方式相同。

这里有一些例子: How to clear the canvas for redrawing

关于javascript - 在 Canvas 内绘制的弹跳球,javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36092380/

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