小编Mat*_*arn的帖子

我正在尝试创建一个重叠的形状数组.但是我很难防止那些形状堆叠在一起.

我想我希望它们在一起啮合,如果这有意义的话？

这是代码:

var overlap_canvas = document.getElementById("overlap");
var overlap_context = overlap_canvas.getContext("2d");
var x = 200;
var y = x;
var rectQTY = 4 // Number of rectangles

overlap_context.translate(x,y);

for (j=0;j<rectQTY;j++){    // Repeat for the number of rectangles

// Draw a rectangle
overlap_context.beginPath();
overlap_context.rect(-90, -100, 180, 80);
overlap_context.fillStyle = 'yellow';
overlap_context.fill();
overlap_context.lineWidth = 7;
overlap_context.strokeStyle = 'blue';
overlap_context.stroke();

// Degrees to rotate for next position
overlap_context.rotate((Math.PI/180)*360/rectQTY);
}

这是我的jsFiddle:http: //jsfiddle.net/Q8yjP/

这就是我想要实现的目标:

任何帮助或指导将不胜感激!