Javascript HTML5画布-将正方形变为圆形

在HTML5画布上，我找不到制作彩色圆圈的方法。我一直在咨询作为参考

这是我目前的尝试

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillRect（20,20,100,100）；
ctx.lineJoin=“圆形”；
ctx.lineWidth=“拐角半径”
尽可能避免使用w3schools.com。请参考类似的网站


var canvas=document.getElementById（'myCanvas'）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
变量半径=50；//弧半径
var startAngle=0；//圆上的起点
var endAngle=Math.PI*2；//圆上的端点
ctx.弧（150，75，半径，星形，端角，真）；
ctx.fill（）

要画一个圆，你需要画一个弧，有一个起始角和一个结束角。因此，您必须使用Pi并定义半径

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();

您可以使用二次曲线“圆化”正方形的直线，直到它们形成一个圆



//将sideCount更改为所需的#个多边形边
//
var侧数=4；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.lineWidth=2；
ctx.fillStyle=randomColor（）；
var PI2=Math.PI*2；
var-cx=150；
var-cy=150；
var半径=100；
var xx=函数（a）{
返回值（cx+半径*数学cos（a））；
}
var yy=函数（a）{
返回值（cy+半径*数学sin（a））；
}
var lerp=函数（a、b、x）{
回报率（a+x*（b-a））；
}
var边=[]；
对于（变量i=0；i100）{
百分比=100；
}
如果（百分比<0）{
百分比=0；
}
}
功能抽边（pct，彩色）{
clearRect（0，0，canvas.width，canvas.height）；
如果（pct==100）{
ctx.beginPath（）；
ctx.弧（cx，cy，半径，0，PI2）；
ctx.closePath（）；
ctx.fill（）；
}否则{
ctx.beginPath（）；
移动到（边[0].x0，边[0].y0）；
对于（变量i=0；i

body{背景色：象牙；}
画布{边框：1px纯红；}

设置动画以形成形状
设置圆的动画

所以你想让你的正方形在一段时间后变成一个圆？还是你只想要一个圆？我只想要一个圆。这就是我一直试图创建的一个重要点，给圆上色在调用
fill（）
之前设置
context.fillStyle
“我已经尝试使用画布圆弧方法，它创建了一个圆，但没有给它上色。”你应该提到如何给圆上色。这不会添加OP没有做的任何事情。@SpencerWieczorek-
ctx.fill（）填充圆圈（从代码中可以明显看出这一点）。再次阅读我的评论，我看不到你提到如何给圆圈着色。为此，您需要将
fillStyle
设置为特定颜色。默认情况下它是黑色的。@SpencerWieczorek-那么黑色有什么问题？OP的问题是无法在第一时间创建一个圆圈，无论是抚摸还是填充。选择颜色是次要问题。另外，我提供的MDN链接更详细。OP两次询问如何创建彩色圆圈，并提到他们可以创建圆圈，但它不是彩色的。他们显然需要调用
fill（）
（或
stoke（）
）甚至在屏幕上画圆圈。有可能OP已经能做到这一点了。哇，太好了。第一个回答回答了字面上的问题：“有没有办法，我可以把我的方块变成圆？”尽管我感觉OP只是想找出热来画一个圆。我怀疑同样的事情……我只是不得不做动画；-）请注意，动画的最后一部分确实使用了arc命令（因为qCurves无法创建完美的圆）。因此，这两个请求在技术上都已满足：-）