使画布(矩形)环绕一个矩形，border-radius

Question

我有一个具有边界半径的图像，我试图用画布线环绕它。我想使用canvas因为我需要能够设置矩形环绕它的距离，例如，如果我将它设置为1，这个矩形将几乎是他们的，如果我将它设置为100，它将完全围绕矩形，并具有边界半径。这里有一个例子，我需要一个圆圈:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function newLine(){
let value = (Math.floor(Math.random() * 100) + 1) * 0.06283185307179587;
ctx.clearRect(0, 0, c.width, c.height);
ctx.lineWidth = 10;
ctx.strokeStyle = '#00FF00';

ctx.beginPath();
ctx.arc(100, 75, 55, 0, value);
ctx.stroke();
}
setInterval(()=>{
newLine()
}, 100)

img{
width: 100px;
border-radius: 50px;
position: absolute;
left: 58px;
top: 33px;
}

<img src="https://media-exp1.licdn.com/dms/image/C4E0BAQHikN6EXPd23Q/company-logo_200_200/0/1595359131127?e=2159024400&v=beta&t=S5MNjBDjiH433VCWzjPeiopNDhxGwmfcMk4Zf1P_m_s"></img>
<canvas id="myCanvas"></canvas>

然而，如果我把边界半径变小一点，它就不会绕着它了。有办法做到这一点吗?

下面的代码片段显示了我需要的内容:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function newLine(){
let value = (Math.floor(Math.random() * 100) + 1) * 0.06283185307179587;
ctx.clearRect(0, 0, c.width, c.height);
ctx.lineWidth = 10;
ctx.strokeStyle = '#00FF00';

ctx.beginPath();
ctx.arc(100, 75, 55, 0, value);
ctx.stroke();
}
setInterval(()=>{
newLine()
}, 100)

img{
width: 100px;
border-radius: 30px;
position: absolute;
left: 58px;
top: 33px;
}

<img src="https://media-exp1.licdn.com/dms/image/C4E0BAQHikN6EXPd23Q/company-logo_200_200/0/1595359131127?e=2159024400&v=beta&t=S5MNjBDjiH433VCWzjPeiopNDhxGwmfcMk4Zf1P_m_s"></img>
<canvas id="myCanvas"></canvas>

这可能吗?由于

Answer 1

我认为这是一个很好的解决方案，非常灵活，基本上没有JS开销。

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
let value = 0
function newLine(){
value += Math.PI/60
value %= Math.PI*2

ctx.clearRect(0, 0, c.width, c.height);
ctx.lineWidth = 10;
ctx.fillStyle = '#00FF00';

ctx.beginPath();
// move to center
ctx.moveTo(c.width/2, c.height/2)
// line to right
ctx.lineTo(c.width, c.height/2)
// make a big semicircle
ctx.arc(c.width/2, c.height/2, c.width, 0, value);
ctx.fill();
}
setInterval(()=>{
newLine()
}, 100)

:root {
/** ===== Try changing these variables ===== **/
--thing-radius: 35px;
--thing-border: 5px;
--thing-size: 100px;


--thing-double-border: calc(2 * var(--thing-border));
}
.thing {
width: calc(var(--thing-size) + var(--thing-double-border));
height: calc(var(--thing-size) + var(--thing-double-border));
display: grid;
grid-template-areas: "center";
grid-template-columns: 100%;
}
.thing > * {
box-sizing: border-box;
grid-area: center;
width: 100%;
}
.thing > img {
border-radius: var(--thing-radius);
border: var(--thing-border) solid transparent;
z-index: 1;
}

.thing > canvas {
border-radius: var(--thing-radius);
}

<div class="thing">
<!-- note that you don't need to change the canvas size -->
<canvas id="myCanvas" width="100" height="100"></canvas>
<img src="https://media-exp1.licdn.com/dms/image/C4E0BAQHikN6EXPd23Q/company-logo_200_200/0/1595359131127?e=2159024400&v=beta&t=S5MNjBDjiH433VCWzjPeiopNDhxGwmfcMk4Zf1P_m_s"/>
</div>

这个解决方案的工作原理是渲染一个大的饼，然后在图像后面用css裁剪。