Question

我正在尝试使用<canvas>来构建网格。请注意 - 下面的代码不是我的代码，我记得在某处堆栈溢出时找到它：

这是我的错误：

无法调用未定义的方法'getContext'

<!DOCTYPE html>
    <html>
        <head>  
    <style type="text/css">

        body {
        background: lightblue;
    }

    canvas {
        background: #fff;
        margin: 20px;
    }
        </style>

<!-- JQ Lib -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>



<script type="text/javascript">

          //grid width and height
    var bw = 400;
    var bh = 400;
    //padding around grid
    var p = 10;
    //size of canvas
    var cw = bw + (p*2) + 1;
    var ch = bh + (p*2) + 1;

    var canvas = $('#canvas').attr({width: cw, height: ch}).appendTo('body');
var context = canvas.get(0).getContext("2d");

    function drawBoard(){
        for (var x = 0; x <= bw; x += 40) {
            context.moveTo(0.5 + x + p, p);
            context.lineTo(0.5 + x + p, bh + p);
        }


        for (var x = 0; x <= bh; x += 40) {
            context.moveTo(p, 0.5 + x + p);
            context.lineTo(bw + p, 0.5 + x + p);
        }

        context.strokeStyle = "black";
        context.stroke();
    }

    drawBoard();
          </script>

        </head>


        <body>

        <canvas id="canvas">    </canvas>


        </body>
    </html>

错误源于此行：

 var canvas = $('#canvas').attr({width: cw, height: ch}).appendTo('body');

我尝试了很多不同的方法，但我一直遇到上述错误。我只是在这里犯了一个无意识的错误吗？

Answer 1

你还没有定义$，它是各种不同库使用的常见（但meaningless）变量名，包括Protoype.js，Mootools和jQuery。

该语法看起来像jQuery，因此您需要包含该库的脚本或使用内置函数重写它。

尝试制作画布时出错

1 个答案: