html - 画布单线，形状为笔划

Question

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

我将如何绘制一个在一侧有一个笔触和一个填充的形状？

提前致谢。

Answer 1

一种方法是在您没有完全完成路径时调用 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();

​<a href="http://jsfiddle.net/BVtLL/" rel="nofollow">现场演示

这只是一个快速的概念验证功能，作为实现您正在寻找的另一种方式。

现场演示 2

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

​</p>