问什么不能绘制七巧板?
<!DOCTYPE html>
<html>
<head>
<title>acg</title>
</head>
<body>
<canvas id="canvas" style="border:5px #aaa solid;display:block;margin:35px auto"></canvas>
</body>
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;
if (canvas.getContext("2d")) {
var cantext = canvas.getContext("2d"); //2d图形
} else {
alert("此浏览器不支持canvas,请更换浏览器")
};
var aa = [{
aa: [{
x: 0,
y: 0
}, {
x: 800,
y: 0
}, {
x: 400,
y: 400
}],
color: "#caff67"
}, {
aa: [{
x: 0,
y: 0
}, {
x: 400,
y: 400
}, {
x: 0,
y: 800
}],
color: "#67becf"
}, {
aa: [{
x: 800,
y: 0
}, {
x: 800,
y: 400
}, {
x: 600,
y: 600
}, {
x: 600,
y: 200
}],
color: "#ef3d61"
}, {
aa: [{
x: 600,
y: 200
}, {
x: 600,
y: 600
}, {
x: 400,
y: 400
}],
color: "f9f51a"
}, {
aa: [{
x: 400,
y: 400
}, {
x: 600,
y: 600
}, {
x: 400,
y: 800
}, {
x: 200,
y: 600
}],
color: "#a594c0"
}, {
aa: [{
x: 200,
y: 600
}, {
x: 400,
y: 800
}, {
x: 0,
y: 800
}],
color: "#fa8ecc"
}, {
aa: [{
x: 800,
y: 400
}, {
x: 800,
y: 800
}, {
x: 400,
y: 800
}],
color: "#f6ca29"
}]
for (i = 0; i < aa.length; i++) {
cc(aa[i], context);
console.log(i);
}
function cc(dd, ee) {
ee.beginPath();
ee.moveTo(dd.bb[0].x, dd.bb[0].y);
for (i = 1; i < dd.bb.length; i++)
ee.lineTo(dd.bb[i].x, dd.bb[i].x);
ee.closePath();
ee.fillStyle = dd.color;
ee.fill();
console.log(i);
}
}
</script>
</html>
