当我使用JavaScript渲染一个小圆圈时'；s getContext（“2d”）中，它在渲染时缺少一个片段
我正在尝试为一个网页制作一个非常简单的交互式片段，我需要渲染许多在屏幕上反弹的小圆圈。。。然而，我遇到了一个非常奇怪的问题。当我渲染一个小圆（半径约为10或更小）时，它会在没有明显原因的情况下从右上角取出一块进行渲染。如果我增加圆的大小，那么它将开始正确渲染 以下是我迄今为止的所有代码：当我使用JavaScript渲染一个小圆圈时'；s getContext（“2d”）中，它在渲染时缺少一个片段,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我正在尝试为一个网页制作一个非常简单的交互式片段，我需要渲染许多在屏幕上反弹的小圆圈。。。然而，我遇到了一个非常奇怪的问题。当我渲染一个小圆（半径约为10或更小）时，它会在没有明显原因的情况下从右上角取出一块进行渲染。如果我增加圆的大小，那么它将开始正确渲染 以下是我迄今为止的所有代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8">
<!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>
没有什么
#标题{
背景：红色；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：25%；
文本对齐：居中；
}
#收割台h1{
位置：相对位置；
最高：8%；
字体大小：200%；
}
#标题画布{
位置：绝对位置；
左：0；
排名：0；
}
（为了隐私而删除）
让canvas=document.getElementById（“header”）.getElementsByTagName（“canvas”）[0]；
canvas.width=Math.round（window.innerWidth）；
canvas.height=Math.round（window.innerHeight*0.25）；
设ctx=canvas.getContext（“2d”）；
让宽度=canvas.width；
let height=canvas.height；
功能d2r（度）{
返回（度*（数学PI/180））；
}
随机函数（最小值、最大值）{
常数差=（最大-最小）+1；
返回值（Math.floor（Math.random（）*diff）+min）；
}
阶级泡沫{
构造函数（x，y）{
这个.x=x；
这个。y=y；
这.r=随机（0，d2r（360））；
该速度=0.6；
this.xvel=Math.cos（this.r）*this.speed；
this.yvel=Math.sin（this.r）*this.speed；
这个尺寸=10；
}
画（）{
ctx.beginPath（）；
ctx.fillStyle=“黑色”；
ctx.arc（this.x，this.y，this.size/2，this.size/2,0，d2r（360））；
ctx.fill（）；
}
更新（）{
this.x+=this.xvel；
this.y+=this.yvel；
如果（此.x<此.size/2）{
this.x=this.size/2；
this.xvel=-this.xvel；
}
如果（this.x>宽度-this.size/2）{
此.x=宽度-此.size/2；
this.xvel=-this.xvel；
}
如果（此.y<此.size/2）{
this.y=this.size/2；
this.yvel=-this.yvel；
}
如果（this.y>高度-this.size/2）{
this.y=高度-this.size/2；
this.yvel=-this.yvel；
}
}
}
让气泡=[]；
for（设i=0；i<50；i++）{
推（新气泡（随机（4，宽度-4），随机（4，高度-4））；
}
让drawLoop=setInterval（函数（）{
ctx.fillStyle=“rgb（84,48,23）”；
ctx.fillRect（0,0，宽度，高度）；
for（设i=0；ithis.size=10到不同的大小，以查看它的外观，以及问题出现和消失的时间。当我将其设置为微小的值（如5）时，它几乎呈现为一条线。。。。这很奇怪
感谢您的帮助。我想我将不得不使用某种变通方法来让它以我想要的方式工作
编辑：有问题的代码在Bubble
类中，在draw
方法中。2dArc的参数为
void ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
在你所给的类成员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));
天哪。哇，太谢谢你了。我现在觉得自己很愚蠢。在我生命的最后5年里，我一直在专门使用eliple（）
绘图命令，我的大脑训练自己自然地提供宽度和高度。这是我第一次使用JavaScript的画布上下文，我完全忽略了这一点。非常感谢你的回答。我花了大约30分钟来研究这个，真不敢相信我没听懂，哈哈。