当前浏览器不支持cnavas
var tangram = [
{
f:[{x: 0,y: 0},{x: 800, y: 0},{x: 400, y: 400}],
color: "#FEF734",
},
{
f:[{x: 0,y: 0},{x: 400, y: 400},{x: 0, y: 800}],
color: "#224AFB",
},
{
f:[{x: 800,y: 0},{x: 600, y: 200},{x: 800, y: 400}],
color: "#A82F24",
},
{
f:[{x: 400,y: 400},{x: 600, y: 200},{x: 800, y: 400},{x: 600, y: 600}],
color: "#141D71",
},
{
f:[{x: 400,y: 400},{x: 200, y: 600},{x: 600, y: 600}],
color: "#F17E4D",
},
{
f:[{x: 200,y: 600},{x: 600, y: 600},{x: 400, y: 800},{x: 0, y: 800}],
color: "##EC4F93",
},
{
f:[{x: 800,y: 400},{x: 400, y: 800},{x: 800, y: 800}],
color: "#6CF8FC",
},
];
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;
for(var i = 0; i< tangram.length; i++){
ctx.beginPath();
ctx.moveTo(tangram[i].f[0].x, tangram[i].f[0].y);
for (var j= 1; j < tangram[i].f.length; j++){
ctx.lineTo(tangram[i].f[j].x, tangram[i].f[j].y);
}
ctx.closePath();
ctx.fillStyle = tangram[i].color;
ctx.fill();
ctx.lineWidth = 10;
ctx.stroke();
}
//重绘最外层边框
ctx.lineWidth = 20;
ctx.strokeRect(0,0,800,800);
}