七巧板长什么样?

图片 1

用canvas把她画出来,其实就是把那几个区域的图纸,每个点的坐标找出来,再用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正是每个地方的巅峰组成的数组,数组中各类点用1个json对象存款和储蓄.,一个有三个形象,tangram正是7项,然后用循环,把每个区域的极限和其余的点用线连起来。注意外省的点一定要用路径,至于为啥?能够参见笔者的那篇小说:[js高手之路]
html5 canvas类别教程 –
早先路径beginPath与关闭路径closePath详解

<head> <meta charset=’utf-8′ /> <style> #canvas {
border: 1px dashed #aaa; } </style> <script> window.onload
= function () { var oCanvas = document.querySelector(“#canvas”), oGc =
oCanvas.getContext(‘2d’), width = oCanvas.width, height =
oCanvas.height, tangram = [ { p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, {
x: 400, y: 400 }], color: “#caff67” }, //正上方暗蓝三角形区域 { p: [{
x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: “#67becf”
}, //左方草地绿三角形区域 { p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, {
x: 600, y: 600 }, { x: 600, y: 200 }], color: “#ef3d61” }, { p: [{ x:
600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color:
“#f9f51a” }, { p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400,
y: 800 }, { x: 200, y: 600 }], color: “#a54c09” }, { p: [{ x: 200, y:
600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: “#fa8ccc” }, { p:
[{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color:
“#f6ca29″ } ]; for (var i = 0; i < tangram.length; i++) { draw(
oGc, tangram[i]); }; function draw( cxt, piece ) { cxt.beginPath();
cxt.moveTo(piece.p[0].x, piece.p[0].y); for (var i = 1; i <
piece.p.length; i++) { cxt.lineTo(piece.p[i].x, piece.p[i].y); }
cxt.closePath(); cxt.fillStyle = piece.color; cxt.fill(); } }
</script> </head> <body> <canvas id=”canvas”
width=”800″ height=”800″></canvas> </body>

run code

 

相关文章

网站地图xml地图