HTML5 Canvas - 绘制重叠的多边形

时间:2014-08-11 07:55:55

标签: javascript html5 canvas drawing rendering

所以,我有一个像这样的多边形绘图函数:

Polygon.prototype.draw = function(ctx) {
    ctx.save();
    ctx.beginPath();
    var v = this.vertices[0]
    ctx.moveTo(this.position.x + v.x, this.position.y + v.y);
    var i = this.vertices.length;
    while (i--) {
        v = this.vertices[i]
        ctx.lineTo(this.position.x + v.x, this.position.y + v.y);
    }
    ctx.strokeStyle = "#000";
    ctx.stroke();
    ctx.closePath()
    ctx.restore();
}

这是如何绘制两个重叠的多边形:

Bad

但我想要它们,如果它们重叠,就像这样绘制:

Good

请注意,我会对多边形进行描边,因此我也希望保留画布背景图像。

另外,我想让它适用于超过2个多边形。

有什么好方法吗?

FIDDLE:http://jsfiddle.net/k0cef75t/

1 个答案:

答案 0 :(得分:0)

这是使用合成的一种方式。

使用目的地输出合成来"擦除"组合多边形的中心:

  • 创建临时屏幕外画布
  • 使用double lineWidth
  • 描边多边形
  • 设置globalCompositeOperation="destination-out"
  • 填充多边形(这将"擦除"多边形内部 - 只留下外部笔划)
  • drawImage屏幕画布上的临时画布

enter image description here

示例代码和演示:http://jsfiddle.net/m1erickson/8vrj8r2g/

onscreenContext.drawImage(strokeCombinedShapes(shapes), 40, 30);

function strokeCombinedShapes(shapes){

    // ctx1 is the context of the off-screen canvas
    ctx1.clearRect(0,0,canvas.width,canvas.height);
    ctx1.save();

    // stroke the polygons
    for(var i=0;i<shapes.length;i++){
        var pts=shapes[i];
        ctx1.beginPath();
        ctx1.moveTo(pts[0].x,pts[0].y);
        for(var j=1;j<pts.length;j++){
            ctx1.lineTo(pts[j].x,pts[j].y);
        }
        ctx1.closePath();
        ctx1.lineWidth=2;
        ctx1.stroke();
    }

    // set all new drawings to "erase" current drawings
    ctx1.globalCompositeOperation="destination-out";

    // fill the polygons
    // this causes the insides of the polygons to be "erased"
    for(var i=0;i<shapes.length;i++){
        var pts=shapes[i];
        ctx1.beginPath();
        ctx1.moveTo(pts[0].x,pts[0].y);
        for(var j=1;j<pts.length;j++){
            ctx1.lineTo(pts[j].x,pts[j].y);
        }
        ctx1.closePath();
        ctx1.fill();
    }
    ctx1.restore();
    return(canvas1);
}