画布绘制带边框的线条
画布绘制带边框的线条
提问于 2020-06-30 13:13: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);<canvas id=canvas width=100 height=100></canvas>
有没有更好的方法来画一条线的边框？
回答 2
Stack Overflow用户
发布于 2020-07-01 01:20:30
尝试在外部行设置"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
Stack Overflow用户
发布于 2020-06-30 23:10:25
您可以尝试使用shadow：
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>
这个想法是用一个稍微不同的偏移量在你的path对象周围绘制...同样的逻辑也可以用于图像：
https://raw.githack.com/heldersepu/hs-scripts/master/HTML/canvasOutline.html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62658299
复制相关文章
相似问题
腾讯云开发者
