七巧板长什么样?
用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可。
1 <head>
2 <meta charset='utf-8' />
3 <style>
4 #canvas {
5 border: 1px dashed #aaa;
6 }
7 </style>
8 <script>
9 window.onload = function () {
10 var oCanvas = document.querySelector("#canvas"),
11 oGc = oCanvas.getContext('2d'),
12 width = oCanvas.width, height = oCanvas.height,
13 tangram = [
14 { p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: "#caff67" }, //正上方绿色三角形区域
15 { p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: "#67becf" }, //左方蓝色三角形区域
16 { p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, { x: 600, y: 600 }, { x: 600, y: 200 }], color: "#ef3d61" },
17 { p: [{ x: 600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color: "#f9f51a" },
18 { p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400, y: 800 }, { x: 200, y: 600 }], color: "#a54c09" },
19 { p: [{ x: 200, y: 600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: "#fa8ccc" },
20 { p: [{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color: "#f6ca29" }
21 ];
22 for (var i = 0; i < tangram.length; i++) {
23 draw( oGc, tangram[i]);
24 };
25 function draw( cxt, piece ) {
26 cxt.beginPath();
27 cxt.moveTo(piece.p[0].x, piece.p[0].y);
28 for (var i = 1; i < piece.p.length; i++) {
29 cxt.lineTo(piece.p[i].x, piece.p[i].y);
30 }
31 cxt.closePath();
32
33 cxt.fillStyle = piece.color;
34 cxt.fill();
35 }
36 }
37 </script>
38 </head>
39 <body>
40 <canvas id="canvas" width="800" height="800"></canvas>
41 </body>
tangram存储了每个形状的顶点坐标与填充颜色,p就是每个区域的顶点组成的数组,数组中每个点用一个json对象存储.,一个有7个形状,tangram就是7项,然后用循环,把每个区域的顶点和其他的点用线连起来。注意每个区域的点一定要用路径,至于为什么?可以参考我的这篇文章:[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解