如何制作圆柱状的边界角（不是圆角）

Question

如何更改字体的边框角样式？

-webkit-text-stroke: 3px blue;

这将设置边框，将其应用于字体的轮廓。

如您所见，在我的情况下，轮廓上的东西非常锋利，我希望使用更正交的样式。因为这条线将像用红铅笔在我的素描上一样结束。或者，如果有人不喜欢这种风格，他们可以改用圆滑笔触吗？

Answer 1

我认为您尝试做的事是不可能的。您可以在<canvas>上完成此操作：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var dpr = window.devicePixelRatio;

function paint() {
  canvas.width = 500 * dpr;
  canvas.height = 120 * dpr;

  ctx.lineJoin = "bevel";
  ctx.lineWidth = 3 * dpr;
  ctx.strokeStyle = "blue";
  ctx.font = (140 * dpr) + "px serif";

  ctx.strokeText("Hello!", 20 * dpr, 110 * dpr);
}
paint();

window.addEventListener("resize", function() {
  if (dpr !== window.devicePixelRatio) {
    dpr = window.devicePixelRatio;
    paint();
  }
});

#myCanvas {
  width: 500px;
  height: 120px;
}

<canvas id="myCanvas"></canvas>

这是放大时的样子：