Question

我目前正在使用HTML Canvas和Javascript创建一个简单的程序。我要做的就是在画布上的坐标处绘制一个球，然后使用一些速度变量等来移动。

问题是，我创建了一个Ball对象，因为我打算一次在屏幕上显示多个球，但是画布上什么也没显示。

我已经读过几次了，我没有收到任何错误，所以我正在努力弄清这是怎么回事。

编辑： 我添加了一个控制台日志，以检查git ls-files是否正在运行，但仍然没有错误/结果

代码

git mv

Answer 1

您忘记添加从Mozilla docs提取的ctx.stroke（）或ctx.fill（）

this.drawSelf = function () {
        ctx.beginPath();
        ctx.fillStyle = "#4286f4";
        ctx.arc(this.x,this.y,20,0,Math.PI*2,true);
        ctx.stroke();
        ctx.closePath();
        console.log("Ball is drawing self!");

        if(this.x<0 || this.x>800){ 
            dx=-dx; 
        }
        if(this.y<0 || this.y>800){
        dy=-dy; 
        }

        this.x+=this.dx; 
        this.y+=this.dy;
    }

也请注意，由于您不会在每次绘制时都设置背景，因此画布只会将球添加到当前状态，从而产生cool pattern，但您可能不想这样做。要解决此问题，请将其设为您的绘制方法。

function draw(){
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ball1.drawSelf();
}

编辑：建议不要使用setInterval，而是使用requestAnimationFrame。您可以详细了解here

HTML5画布：未绘制

1 个答案: