html5实现图片打散功能,javascript – 基于网格(html5画布)将多边形拆分为多个多边形...

我在带有底层网格的画布上绘制多边形

我想现在将这个多边形分成多个多边形(基于网格)

因此,我得到4个多边形的坐标,而不是1个多边形.

有没有一个简单的解决方案,我没有想到？

这是我的测试画布的代码(codepen)

var bw = 200;

var bh = 200;

var p = 0;

var cw = bw + (p*2) + 1;

var ch = bh + (p*2) + 1;

var grid = 50;

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

function drawBoard(){

context.beginPath();

for (var x = 0; x <= bw; x += grid){

context.moveTo(0.5 + x + p, p);

context.lineTo(0.5 + x + p, bh + p);

}

for (var x = 0; x <= bh; x += grid) {

context.moveTo(p, 0.5 + x + p);

context.lineTo(bw + p, 0.5 + x + p);

}

context.lineWidth = 1;

context.strokeStyle = "black";

context.stroke();

}

drawBoard();

// Polygon

context.fillStyle = '#f00';

context.beginPath();

context.moveTo(0, 0);

context.lineTo(100,50);

context.lineTo(50, 100);

context.lineTo(0, 90);

context.closePath();

context.fill();