当我使用 JavaScript 的 getContext("2d") 渲染一个小圆圈时，它渲染时缺少一块

Question

我正在尝试为网页制作一个非常简单的交互式片段，我需要渲染许多在屏幕上弹跳的小圆圈...但是我运行遇到了一个非常奇怪的问题。当我渲染一个小圆圈（半径约为 10 或更小）时，它会无缘无故地从右上角取出一个块进行渲染。如果我增加圆圈的大小，它就会开始正确渲染。

到目前为止，这是我的所有代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Nothing</title>
        <style>
            #header{
                background: red;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 25%;
                text-align: center;
            }
            #header h1{
                position: relative;
                top: 8%;
                font-size: 200%;
            }
            #header canvas{
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div id = "header">
            <canvas></canvas>
            <h1>(Removed for privacy)</h1>
        </div>
        
        <script>
            let canvas = document.getElementById("header").getElementsByTagName("canvas")[0];
            canvas.width = Math.round(window.innerWidth);
            canvas.height = Math.round(window.innerHeight * 0.25);
            let ctx = canvas.getContext("2d");
            let width = canvas.width;
            let height = canvas.height;
            
            function d2r(degrees){
                return(degrees * (Math.PI / 180));
            }
            
            function random(min,max){
                const diff = (max - min) + 1;
                return(Math.floor(Math.random() * diff) + min);
            }
        </script>
        
        <script>
            class Bubble{
                constructor(x,y){
                    this.x = x;
                    this.y = y;
                    this.r = random(0,d2r(360));
                    this.speed = 0.6;
                    this.xvel = Math.cos(this.r) * this.speed;
                    this.yvel = Math.sin(this.r) * this.speed;
                    this.size = 10;
                }
                draw(){
                    ctx.beginPath();
                    ctx.fillStyle = "black";
                    ctx.arc(this.x,this.y,this.size / 2,this.size / 2,0,d2r(360));
                    ctx.fill();
                }
                update(){
                    this.x += this.xvel;
                    this.y += this.yvel;
                    if(this.x < this.size / 2){
                        this.x = this.size / 2;
                        this.xvel = -this.xvel;
                    }
                    if(this.x > width - this.size / 2){
                        this.x = width - this.size / 2;
                        this.xvel = -this.xvel;
                    }
                    if(this.y < this.size / 2){
                        this.y = this.size / 2;
                        this.yvel = -this.yvel;
                    }
                    if(this.y > height - this.size / 2){
                        this.y = height - this.size / 2;
                        this.yvel = -this.yvel;
                    }
                }
            }
            
            let bubbles = [];
            
            for(let i = 0;i < 50;i++){
                bubbles.push(new Bubble(random(4,width - 4),random(4,height - 4)));
            }
        </script>
        
        <script>
            let drawLoop = setInterval(function(){
                ctx.fillStyle = "rgb(84, 48, 23)";
                ctx.fillRect(0,0,width,height);
                for(let i = 0;i < bubbles.length;i++){
                    bubbles[i].update();
                    bubbles[i].draw();
                }
            },1000 / 60);
        </script>
    </body>
</html>

您可以将 this.size = 10; 更改为不同的大小以查看它的外观以及问题何时出现和消失。当我将它设置为很小的值（如 5）时，它几乎呈现为一条线....非常非常奇怪。

感谢任何帮助。我假设我将不得不使用某种变通方法来使它按照我想要的方式工作。

编辑：有问题的代码在 Bubble class 中，在 draw 方法中。

Answer 1

2dArc 的参数是

void ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

在你给的 class 成员 draw() 中，

ctx.arc(this.x,this.y,this.size / 2,this.size / 2,0,d2r(360));

其中第二个this.size / 2不需要,

删除它会修复它，

ctx.arc(this.x,this.y,this.size / 2,0,d2r(360));

当我使用 JavaScript 的 getContext("2d") 渲染一个小圆圈时，它渲染时缺少一块

When I render a small circle using JavaScript's getContext("2d"), it renders with a piece missing

html

javascript

html5-canvas