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

Posted 2023-03-24

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

【英文标题】：how to apply border radius to canvas element like div to make it circle?

【发布时间】：2022-01-17 01:25:05

【问题描述】：

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

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

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

`

【问题讨论】：

您的代码运行良好

【参考方案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...这是做一个圆圈所需要的。