使 Canvas （矩形）环绕一个具有边框半径的矩形

Question

我有一个带有边界半径的图像，我试图让 canvas 线环绕它。 我想使用 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 裁剪。