如何将边框半径应用于像 div 这样的画布元素以使其成为圆形？

【问题标题】：how to apply border radius to canvas element like div to make it circle?如何将边框半径应用于像 div 这样的画布元素以使其成为圆形？
【发布时间】：2022-01-17 01:25:05
【问题描述】：

我想让画布元素像其他任何 div 一样循环，但它不起作用。这是我的代码。请在代码中掠夺。边界半径属性有什么问题？

&lt;canvas id="myCanvas" width="200" height="200" style="background-color:red;border:1px solid;border-radius:50%"&gt;

border-radius 属性不像我在 div 上应用的那样工作。实际上，我想创建画布的矩形、正方形和圆形。请任何人都可以帮助我

【问题讨论】：

您的代码运行良好

标签： html css html5-canvas

【解决方案1】：

您的代码看起来不错。边框半径应该这样做，但是如果您使用 JavaScript，此方法可能会有所帮助：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

【讨论】：

@ctx.arc 中这些值 100、75、59、0 是什么？
context.arc(x,y,r,sAngle,eAngle,逆时针); x/y：圆心的 x,y 坐标 r：圆的半径 sAngle：圆的起始角度，单位为弧度（0 表示时钟上的 3:00 位置） eAngle：圆的结束角度逆时针圆弧度：设置绘图是否应设置为逆时针。 False 是默认值。
作为对我评论的补充：sAngle 通常也是 *Math.PI 但在这种情况下我将其省略了，因为 0 * Math.PI = 0。Math.PI 仅输出 3.14159...这是做一个圆圈所需要的。