                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /炫丽的倒计时效果Canvas绘图与动画基础

为什么无法出现七巧板？

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
   <title>tes6--H5关于七巧板</title>
   <style type="text/css">
   #myCanvas{display:block;border:1px solid #f00; margin:50px auto;}
   </style>
</head>
<body>
   <canvas id="myCanvas" width="800" height="800"></canvas>
</body>
<script type="text/javascript">
$(document).ready(function(){
   var sev=[
       {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:"#67beef"},
       {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:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
       {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800},{x:600,y:200}],color:"#f6ca29"}
   ]

   window.onload=function(){
       var box=document.getElementById('myCanvas');
       var picture=box.getContext('2d');
       for(i=0;i<sev.length;i++){
           draw(sec[i],picture);
       }
   }
   function draw(piece,pic){
       pic.beginPath();
       pic.moveTo(piece.p[0].x,piece.p[0].y);
       for(i=0;i<piece.p.length;i++){
           pic.lineTo(piece[i].x,piece[i].y)
       }
       pic.closePath();
       pic.fillStyle=piece.color;
       pic.fill();
   }
})
</script>
</html>

qq_无意间哼出的旋律_0

2016-05-27

源自：炫丽的倒计时效果Canvas绘图与动画基础 2-2

关注问题我要回答

1122

操作

收起

3 回答

酱爆1992 回答被采纳 +3 积分
2016-05-27

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!-- <script type="text/javascript" src="jquery-1.8.2.min.js"></script> -->
    <title>tes6--H5关于七巧板</title>
    <style type="text/css">
    #myCanvas{display:block;border:1px solid #f00; margin:50px auto;}
    </style>
</head>
<body>
    <canvas id="myCanvas" width="800" height="800"></canvas>
</body>
<script type="text/javascript">
window.onload=function(){


    var sev=[
        {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:"#67beef"},
        {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:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
        {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800},{x:600,y:200}],color:"#f6ca29"}
    ]


        var box=document.getElementById('myCanvas');
        var picture=box.getContext('2d');
        for(j=0;j<sev.length;j++){
            draw(sev[j],picture);
        }
    
    function draw(piece,pic){
        pic.beginPath();
        pic.moveTo(piece.p[0].x,piece.p[0].y);
        for(i=1;i<piece.p.length;i++){
            pic.lineTo(piece.p[i].x,piece.p[i].y)
        } 
        pic.closePath();
        pic.fillStyle=piece.color;
        pic.fill();
    }
}
</script>
</html>

这是根据你的代码稍作了点修改，你的错误在于function draw里面的循环语句写错了，求最佳求最佳