問什么不能繪制七巧板?
<!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>
2015-12-28
????????function?cc(dd,?ee)?{ ????????????ee.beginPath(); //????????????ee.moveTo(dd.bb[0].x,?dd.bb[0].y); ????????????ee.moveTo(dd.aa[0].x,?dd.aa[0].y); //????????????for?(i?=?1;?i?<?dd.aa.length;?i++){ //????????????????ee.lineTo(dd.aa[i].x,?dd.aa[i].x); //????????????} ????????????for?(y?=?1;?y?<?dd.aa.length;?y++){ ????????????????ee.lineTo(dd.aa[y].x,?dd.aa[y].y); ????????????} ????????????ee.closePath(); ????????????ee.fillStyle?=?dd.color; ????????????ee.fill(); ????????}看注釋