画布用边框画线答案

【问题标题】：Canvas draw line with border画布用边框画线
【发布时间】：2020-10-20 19:22:13
【问题描述】：

我需要画一条线并给它一个边框。

我试着画两条线，一条 5px 和 3px 以上

但这看起来不像是真正的边界

const ctx = canvas.getContext('2d');
const path = new Path2D();

ctx.strokeStyle = "black";
ctx.lineWidth = 5;

path.moveTo(40, 40);
path.lineTo(50, 35);
path.lineTo(60, 40);

ctx.stroke(path);

ctx.strokeStyle = "red";
ctx.lineWidth = 3;

path.moveTo(40, 40);
path.lineTo(50, 35);
path.lineTo(60, 40);

ctx.stroke(path);

&lt;canvas id=canvas width=100 height=100&gt;&lt;/canvas&gt;

有没有更好的方法来绘制线条的边框？

【问题讨论】：

这能回答你的问题吗？ How create a line with borders in HTML5 canvas properly
@Taxel 没有。我以前看过这个答案。也许答案中的link 就是这样做的方法。但我没有成功
尝试为更宽的线添加ctx.lineCap="square"，为另一条添加ctx.lineCap="butt"

标签： javascript html svg canvas path-2d

【解决方案1】：

尝试在外线设置“endCap”：

const ctx = canvas.getContext('2d');
const path = new Path2D();

ctx.strokeStyle = "black";
ctx.lineWidth = 5;
ctx.lineCap = "butt"; // butt  round  square <-- other options

path.moveTo(40, 40);
path.lineTo(50, 35);
path.lineTo(60, 40);

ctx.stroke(path);

ctx.strokeStyle = "red";
ctx.lineWidth = 3;

path.moveTo(40, 40);
path.lineTo(50, 35);
path.lineTo(60, 40);

ctx.stroke(path);

见： https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap

【讨论】：

【解决方案2】：

你可以试试影子：

const ctx = canvas.getContext('2d');

function drawPath(path) {
  ctx.lineWidth = 3;
  ctx.strokeStyle = "red";
  ctx.shadowColor = 'black';

  for (i = 0; i <= 360; i += 10) {
    a = i * Math.PI / 180
    ctx.beginPath();
    ctx.shadowOffsetX = 4 * Math.sin(a)
    ctx.shadowOffsetY = 4 * Math.cos(a)
    ctx.stroke(path);
  }
}

const path = new Path2D();
path.moveTo(20, 40);
path.lineTo(50, 35);
path.lineTo(80, 40);
path.lineTo(80, 80);
path.lineTo(160, 80);
drawPath(path);

&lt;canvas id=canvas width=200 height=100&gt;&lt;/canvas&gt;

这个想法是在你的路径对象周围绘制一个稍微不同的偏移量......并且可以对图像使用相同的逻辑：

https://raw.githack.com/heldersepu/hs-scripts/master/HTML/canvasOutline.html

【讨论】：