为什么无法出现七巧板?

来源:2-2 绘制直线、多边形和七巧板

qq_无意间哼出的旋律_0

2016-05-27 11:01

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

写回答 关注

3回答

  • 酱爆1992
    2016-05-27 16:16:33
    已采纳
    <!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里面的循环语句写错了,求最佳求最佳


    qq_无意间...

    非常感谢!

    2016-06-01 16:21:20

    共 1 条回复 >

  • 慕移动9181930
    2022-03-26 23:58:33

    用left也是可以的,老师只是教了使用绝对定位布局的一种方法,毕竟不是很常用,所以没有面面俱到而已???

  • 佳雨玲子
    2016-05-27 16:28:21

    错误一:调用draw()函数时第一个参数拼写错误,sev不是sec;错误二:drow函数内部的for循环中,pic.lineTo(piece[i].x,piece[i].y  应改为  pic.lineTo(piece.p[i].x,piece.p[i].y。而且没懂你为啥要用jquery

炫丽的倒计时效果Canvas绘图与动画基础

学习HTML5中最激动人心的技术Canvas,彻底释放自己的创造力

96751 学习 · 1000 问题

查看课程

相似问题