我正在尝试创作一个受此艺术作品启发的背景http://www.artinthepicture.com/paintings/Paul_Klee/Flora-on-the-Sand/
这是我目前为止的代码https://github.com/jessicacgu/jessicacgu.github.io/blob/faces/index.html
我使用的是javascript而不是CSS，因为我希望每个方块都有一个闪烁的面部表情（快乐和兴奋之间的变化）（如果有更酷的事情，请告诉我！）
现在，我将所有正方形的大小相同，彼此之间的间距相等。我希望它通过不同形状的方块更像艺术品。
我的问题是，如果我在0,0画一个正方形为15x15，我如何判断其他正方形不能与第一个正方形重叠？这可能吗？
如果没有，我可以摆脱表达式，只使用CSS（我主要想模仿那件艺术品:(）。
^另外，在stackoverflow上展示大块代码的正确方法是什么？我应该复制并粘贴或发布链接到github还是放入codepen？
编辑：代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="application/javascript">
// Draws faces onto all of the canvas. Puts 10px distance between each
// face
function draw_faces() {
var canvas = document.getElementById("faces_bkgd");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Setting a background color
ctx.fillStyle = "rgb(244,191,175)";
ctx.fillRect(0,0,canvas.width,canvas.height);
// Creating the shape of the face
var shape = new Path2D();
shape.rect(0,0,30,30);
// Making the Happy Expression
var happy_expr = new Path2D();
// Making the left eye (as a carrot shape)
happy_expr.moveTo(4,13);
happy_expr.lineTo(8,5);
happy_expr.lineTo(12,13);
// Making the right eye (as a carrot shape)
happy_expr.moveTo(18,13);
happy_expr.lineTo(22,5);
happy_expr.lineTo(26,13);
// Making the mouth (a thin line)
happy_expr.moveTo(8,22);
happy_expr.lineTo(22,22);
// Making the Excited Expression
var excited_expr = new Path2D();
// Making the left eye (90 deg clockwise carrot)
excited_expr.moveTo(3,5);
excited_expr.lineTo(11,9);
excited_expr.lineTo(3,13);
// Making the right eye (90 deg counter clockwise carrot)
excited_expr.moveTo(26,5);
excited_expr.lineTo(18, 9);
excited_expr.lineTo(26, 13);
// Making the mouth (a W shape)
excited_expr.moveTo(7,17);
excited_expr.lineTo(11,25);
excited_expr.lineTo(15,17);
excited_expr.lineTo(19,25);
excited_expr.lineTo(23,17);
// Colors for the faces. Along with the background creates a palette
// that was taken from
// http://www.colourlovers.com/palette/1959912/L_i_n_d_a
var colors = ["rgb(211,210,164)", "rgb(198,223,194)",
"rgb(217,194,152)"];
// Expressions for the faces
var exprs = [happy_expr, excited_expr];
// Keeps track of the colors for each face drawn onto the canvas
var faces_color = [];
// Keeps track of the expressions for each face drawn onto the
// canvas
var faces_expr = [];
// Scaling the faces by 2x. Adjusting for new number of faces on
// canvas
ctx.scale(2, 2);
var num_width = canvas.width/70;
var num_height = canvas.height/70;
// Does actual drawing of face onto the canvas
function draw_face(x, y, color, shape, expr) {
ctx.save();
ctx.translate(x, y);
// Drawing the shape of the face
ctx.fillStyle = color
ctx.fill(shape);
// Giving the face a border
ctx.lineWidth = 3;
ctx.strokeStyle = "rgb(176,144,132)";
ctx.strokeRect(0,0,30,30);
// Drawing the expression
ctx.lineWidth = 1;
ctx.stroke(expr);
ctx.restore();
}
// Setting up the colors and initial expressions for each face
for (var i = 0; i < num_width ; i += 1) {
for (var j = 0; j < num_height ; j += 1) {
// Math.floor(Math.random()*100) chooses a random number from an
// even distribution of the integers[0,100)
var c = Math.floor(Math.random()*100)%colors.length;
var e = Math.floor(Math.random()*100)%exprs.length;
// Draw the initial face on the canvas
draw_face(i*40,j*40, colors[c], shape, exprs[e]);
// Keeps track of each faces's color and expression
faces_color.push(c);
faces_expr.push(e);
}
}
// Changes the expressions of a few random faces at a time
function change_facial_expr() {
var face_num = 0;
// Chooses a random face to change
var blink = Math.floor(Math.random() * faces_color.length);
for (var i = 0; i < num_width; i += 1) {
for (var j = 0; j < num_height ; j += 1) {
// Determines if the face is to be changed
if (face_num == blink) {
faces_expr[face_num] = (faces_expr[face_num]+1)%exprs.length
}
draw_face(i*40, j*40, colors[faces_color[face_num]], shape,
exprs[faces_expr[face_num]]);
face_num += 1;
}
}
}
window.setInterval(change_facial_expr, 1000);
}
}
</script>
</head>
<body onload="draw_faces();">
<canvas id="faces_bkgd"></canvas>
</body>
</html>