我需要画一条线并给它加上边框。
我试图画两条线,一条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>
是否有更好的方法为线绘制边框?
答案 0 :(得分: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
答案 1 :(得分:0)
您可以尝试使用阴影:
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