画布绘制带边框的线条

Question

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

我尝试画两条线，一条 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);

<canvas id=canvas width=100 height=100></canvas>

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

Answer 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

Answer 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);

<canvas id=canvas width=200 height=100></canvas>

这个想法是用略有不同的偏移量绘制路径对象......同样的逻辑可以用于图像：

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