问答详情
源自:2-2 绘制直线、多边形和七巧板

canvas七巧板案例源码

<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>

看到很多同学要源码  自己写的一个 七巧板  希望大家做参考  多动手练习

提问者:______完蛋先生 2015-05-19 15:27

个回答

  • qq_道格拉斯_03327618
    2016-05-19 15:47:10

    学习了

  • 有点xiaoping
    2015-12-19 20:45:51

    学习了