<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<link?rel="stylesheet"?type="text/css"?href="reset.css">
</head>
<body>
????<canvas?id="canvas"?style="border:?1px?solid?#aaa;display:?block;margin:50px?auto">
????</canvas>
????<script?type="text/javascript">
?var?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:"#a594c0"},
?{p:[{x:200,y:60},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
?{p:[{x:800,y:0},{x:400,y:800},{x:400,y:800}],color:"#f6ca29"},
?];
?window.onload?=?function?()?{
????????????var?canvas?=?document.getElementById("canvas");
?var?context?=?canvas.getContext("2d");
?canvas.width?=?800;
?canvas.height?=?800;
?for?(var?i?=?0;?i?<?tangram.length;?i++)?{
????????????????draw(tangram[i],?context);
?}
????????}
????????function?draw(piece,cxt)?{
????????????cxt.beginPath();
?cxt.moveTo(piece.p[0].x,piece.p[0].y);
?for(?var?i?=?1?;i<piece.length;i++){
????????????????cxt.lineTo(?piece.p[i].x,piece.p[i].y);
?}
????????????cxt.closePath();
?cxt.fillStyle?=?piece.color;
?cxt.fill();
?}
????</script>
</body>
</html>
2018-08-12