p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; min-height: 35.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #d74200 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4a8a01 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4f5d66; min-height: 35.0px }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #289c97 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #a5b2b9 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #060606 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #ad42ef }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4663cc }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #ad42ef }
span.s7 { color: #698906 }
span.s8 { color: #d16400 }
span.s9 { color: #060606 }
span.s10 { color: #000000 }
span.s11 { color: #4663cc }
span.s12 { color: #4a8a01 }
span.s13 { color: #e48b00 }
span.s14 { color: #b58a00 }
span.Apple-tab-span { white-space: pre }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid black;display: block;margin: 50px auto;">
</canvas>
</body>
<script type="text/javascript">
//定义一个数组变量，分别代表七巧板的七块
//每一部分是一个类的对象，每一部分包含一个p，
//p也是一个数组，分别代表七巧板的每一块的顶点坐标
//color属性代表每一块的颜色
var tangram = [{
p: [{
x: 0,
y: 0
}, {
x: 800,
y: 0
}, {
x: 400,
y: 400
}],
color : "red"
}, {
p: [{
x: 0,
y: 0
}, {
x: 400,
y: 400
}, {
x: 0,
y: 800
}],
color : "blue"
}, {
p: [{
x: 800,
y: 0
}, {
x: 800,
y: 400
}, {
x: 600,
y: 600
}, {
x: 600,
y: 200
}],
color : "yellow"
}, {
p: [{
x: 600,
y: 200
}, {
x: 600,
y: 600
}, {
x: 400,
y: 400
}],
color : "pink"
}, {
p: [{
x: 400,
y: 400
}, {
x: 600,
y: 600
}, {
x: 400,
y: 800
}, {
x: 200,
y: 600
}],
color : "gray"
}, {
p: [{
x: 200,
y: 600
}, {
x: 400,
y: 800
}, {
x: 0,
y: 800
}],
color : "green"
}, {
p: [{
x: 800,
y: 400
}, {
x: 800,
y: 800
}, {
x: 400,
y: 800
}],
color : "orange"
}]
window.onload = function() {
//获取Canvas
var canvas = document.getElementById("canvas");
//定义宽高
canvas.width = 800;
canvas.height = 800;
//获取context
var context = canvas.getContext("2d");
//遍历七巧板数组
for(var i = 0; i < tangram.length; i++)
//每次遍历调用函数draw()
draw(tangram[i], context);
//draw()函数传入两个参数，第一个是七巧板中的一块，
//第二个是我们获得的绘图的上下文环境context
}
function draw(piece, cxt) {
cxt.beginPath();
//用moveTo移动到顶点坐标的第一个坐标的位置
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();
//定义颜色，调用piece.color
cxt.fillStyle = piece.color;
cxt.fill();
//给七巧板的每一块加一个外边框
cxt.strokeStyle="black";
cxt.lineWidth=3;
cxt.stroke();
}
</script>
</html>