Question

我正在使用HTML5 Canvas开发一个显示形状集合的应用程序。在每个形状上，我希望其中一个形状边有一个笔划，但如果不给所有边都划线或使用单独的线条并打破形状，阻止它进行填充，则不能这样做。

我如何绘制一边有笔划和填充的形状？

提前致谢。

Answer 1

一种方法是在你没有完全使用路径时调用笔划，因此只能抚摸已经绘制的内容。显然，如果你不首先画一边你想要抚摸它不会工作，所以下面还有另一种选择。

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

<强> Live Demo

这只是概念功能的快速证明，是实现您所需要的另一种方式。

<强> Live Demo 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);

画布单线与笔画形状

1 个答案: