<!DOCTYPE?html>
<!--
To?change?this?license?header,?choose?License?Headers?in?Project?Properties.
To?change?this?template?file,?choose?Tools?|?Templates
and?open?the?template?in?the?editor.
-->
<html>
????<head>
????????<title>canvas繪制七巧板</title>
????????<meta?charset="UTF-8">
????????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????</head>
????<body>
????????<canvas?id="canvas"?style="border:?1px?solid?#aaaa;display:?block;margin:?50px?auto;">
????????????當前瀏覽器不支持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:"#f951a"},
????????????????{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
????????????????{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
????????????????{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?context?=?canvas.getContext('2d');
????????????????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.p.length?;?i?++)
????????????????????cxt.lineTo(?piece.p[i].x?,?piece.p[i].y?);
????????????????cxt.closePath();
????????????????
????????????????cxt.fillStyle?=?piece.color;
????????????????cxt.fill();
????????????????
????????????????
????????????}
????????</script>
????</body>
</html>
2015-05-28
找到自己的原因了，是數(shù)組中黃色那塊的顏色寫錯了，l和1傻傻分不清楚，嘿嘿