canvas/七巧板.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>七巧板</title>
</head>

<body>
    <canvas id="canvas" width="800" height="800">
        您当前的浏览器不支持Canvas，请更换浏览器后再试。
    </canvas>
    <script>
    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:"#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"}
	]
	window.onload = function() {
	    var canvas = document.getElementById("canvas");
	    canvas.width = 800;
	    canvas.height = 800;
	    var ctx = canvas.getContext("2d");

	    for( var i = 0; i < tangram.length; i++) {
	    	draw( tangram[i], ctx);
	    }

	    function draw( piece , ctx) {
	    	ctx.beginPath();
	    	ctx.moveTo(piece.p[0].x, piece.p[0].y);
	    	for(var j = 1; j < piece.p.length; j++) {
	    		ctx.lineTo(piece.p[j].x, piece.p[j].y);
	    	}
	    	ctx.closePath();
	    	ctx.fillStyle = piece.color;
	    	ctx.fill();
	    }
	}
    </script>
</body>

</html>