GitHub: https://github.com/BadWaka/canvas-study/blob/master/public/2-2/tangram.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>七巧板</title>
</head>
<body>
<canvas id="tangram"></canvas>
<script>
// 数据数组
var tangramArr = [
{coordinateArr: [{x: 0, y: 0}, {x: 800, y: 0}, {x: 400, y: 400}], color: '#caff67'},
{coordinateArr: [{x: 0, y: 0}, {x: 400, y: 400}, {x: 0, y: 800}], color: '#67becf'},
{coordinateArr: [{x: 800, y: 0}, {x: 800, y: 400}, {x: 600, y: 600}, {x: 600, y: 200}], color: '#ef3d61'},
{coordinateArr: [{x: 600, y: 200}, {x: 600, y: 600}, {x: 400, y: 400}], color: '#f9f51a'},
{coordinateArr: [{x: 400, y: 400}, {x: 600, y: 600}, {x: 400, y: 800}, {x: 200, y: 600}], color: '#a594c0'},
{coordinateArr: [{x: 200, y: 600}, {x: 400, y: 800}, {x: 0, y: 800}], color: '#fa8ecc'},
{coordinateArr: [{x: 800, y: 400}, {x: 800, y: 800}, {x: 400, y: 800}], color: '#caff67'},
];
window.onload = function () {
var canvas = document.getElementById('tangram');
canvas.width = 800;
canvas.height = 800;
var ctx = canvas.getContext('2d');
tangramArr.forEach(function (item, index) {
draw(item, ctx);
});
};
function draw(item, ctx) {
var coordinateArr = item.coordinateArr;
var color = item.color;
ctx.beginPath(); // beginPath方法类似于开启新的路径绘画或清空已有路径
ctx.moveTo(coordinateArr[0].x, coordinateArr[0].y);
for (var i = 1; i < coordinateArr.length; i++) {
ctx.lineTo(coordinateArr[i].x, coordinateArr[i].y);
}
ctx.closePath(); // closePath并不是用来表示结束 而是功能性的 做图形闭合处理（从最后的状态点自动lineTo回归起始点封口）
ctx.fillStyle = color;
ctx.fill();
}
</script>
</body>
</html>
