使画布（矩形）环绕具有边框半径的矩形答案

【问题标题】：Make Canvas (rectangle) wrap around a rectangle with border-radius使画布（矩形）环绕具有边框半径的矩形
【发布时间】：2021-02-17 02:35:14
【问题描述】：

我有一个带有边框半径的图像，我试图让画布线环绕它。我想使用画布，因为我需要能够设置矩形环绕它的距离的值，例如，如果我将其设置为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>

但是，如果我将边框半径缩小一点，它就不会环绕它。有没有办法做到这一点？

这是一个代码 sn-p 显示我需要什么：

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>

这可能吗？谢谢

【问题讨论】：

标签： javascript html css canvas

【解决方案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 裁剪。

【讨论】：