Html 在形状上带有笔划的画布单线

我正在用HTML5画布开发一个应用程序，它显示一组形状。在每个形状上，我希望其中一个形状边有一个笔划，但如果不给所有边一个笔划，或者使用单独的线条并破坏形状，阻止其填充，就无法做到这一点

我如何在一边画一个笔划和填充的形状

---

提前谢谢

一种方法是在没有完全完成路径时调用stroke，因此只对已经绘制的路径进行笔划。显然，如果你不先画出你想要抚摸的那一边，这是行不通的，所以下面还有另一个选择

​var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = canvas.height = 256;

​ctx.fillStyle = "red";
ctx.strokeStyle = "black";
ctx.lineWidth = 2;

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.stroke();
ctx.lineTo(100,200);
ctx.lineTo(50,100);
ctx.lineTo(50,50);
ctx.fill();

​

这只是一个快速的概念验证函数，作为实现所需功能的另一种方式

var shape = [{x:50,y:50}, {x:100, y:100}, {x:100, y:200}, {x:50,y:100}, {x:50, y:50}];

function drawShape(shape, strokeIndex){
    ctx.beginPath();
    ctx.moveTo(shape[0].x, shape[0].y);

    for(var i = 1; i < shape.length; i++){
        ctx.lineTo(shape[i].x, shape[i].y);   
    }
    ctx.closePath();
    ctx.fill();

    // stroke
    ctx.beginPath();
    ctx.moveTo(shape[strokeIndex-1].x, shape[strokeIndex-1].y);
    ctx.lineTo(shape[strokeIndex].x, shape[strokeIndex].y);
    ctx.stroke();
}

drawShape(shape, 3);

var-shape=[{x:50，y:50}，{x:100，y:100}，{x:100，y:200}，{x:50，y:100}，{x:50，y:50}]；
函数drawShape（形状，strokeIndex）{
ctx.beginPath（）；
移动到（形状[0].x，形状[0].y）；
对于（变量i=1；i

​