<canvas?id="mycanvas"></canvas>
????????<script?type="text/javascript">
?????????????????
?????????????????(function(id){
?????????????????????
??????????????????????var?tangram=[
??????????????????????
????????????????????????????????{p:[{x:520,y:40},{x:520,y:170},{x:595,y:110}],color:"#FDAD05"},
????????????????????????????????{p:[{x:595,y:110},{x:670,y:46},{x:670,y:170}],color:"#FC7861"},
????????????????????????????????{p:[{x:670,y:170},{x:595,y:110},{x:520,y:170},{x:595,y:246}],color:"#F2DE0C"},
????????????????????????????????{p:[{x:595,y:246},{x:432,y:390},{x:602,y:555}],color:"#CA9964"},
????????????????????????????????{p:[{x:595,y:246},{x:712,y:350},{x:600,y:465}],color:"#6CA4A7"},
????????????????????????????????{p:[{x:432,y:390},{x:430,y:620},{x:670,y:620}],color:"#F54C42"},
????????????????????????????????{p:[{x:175,y:528},{x:341,y:535},{x:430,y:620},{x:250,y:610}],color:"#9ECF00"}
????????????????????????????????
????????????????????????????????]
??????????????????????
??????????????????????????var?canvas=document.getElementById(id);
????????????????????????????
????????????????????????????canvas.width=1090;
????????????????????????????
????????????????????????????canvas.height=880;
????????????????
????????????????????????var?context=canvas.getContext('2d');?????????????????????????
?????????????????????????????
????????????????????????????for(var?i=0;i<tangram.length;i++)
????????????????????????????{
?????????????????????????????????
????????????????????????????????context.beginPath();
????????????????????????????????
????????????????????????????????context.moveTo(tangram[i].p[0].x,tangram[i].p[0].y);
?????????????????????????????????
????????????????????????????????for(var?j=1;j<tangram[i].p.length;j++){
????????????????????????????????????
????????????????????????????????????context.lineTo(tangram[i].p[j].x,tangram[i].p[j].y);
????????????????????????????????}

????????????????????????????????context.closePath();

????????????????????????????????context.fillStyle=tangram[i].color;
????????????????????????????????
????????????????????????????????context.strokeStyle=tangram[i].color;
????????????????????????????????
????????????????????????????????context.fill();
????????????????????????????????
????????????????????????????????context.stroke();
????????????????????????}
??????????????????????
??????????????????})('mycanvas')

????????</script>

看到很多同學(xué)要源碼? 自己寫的一個(gè) 七巧板? 希望大家做參考? 多動(dòng)手練習(xí)