Question

我有一个简单的HTML 5文件，用于创建画布，并且应该调用javascript文件来生成并在所述画布上绘制表格：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>Table Management</title>
        <script src="js/draw_table.js"></script>
    </head>

    <body onload="drawBoard();" style="background: lightblue;">
        <h1>Table Management</h1>
        <canvas id="canvas" width="420px" height="420px" style="background: #fff; magrin: 20px;"></canvas>
    </body>
</html>

JavaScript的：

var bw = 400;
var bh = 400;
var p = 10;
var cw = bw + (p * 2) + 1;
var ch = bh + (p * 2) + 1;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

function drawBoard() {

    alert("Cheese");

    for (var x = 0; x <= bw; x += 40) {
        alert(x);
        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();
}

问题是，表格没有被绘制。此外，我计划将其扩展为表管理系统，您可以使用拖放操作来移动单元格内容。这是最好的方法吗？

谢谢

Answer 1

在函数中访问这些控件。

function drawBoard() {

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    ....
}

Answer 2

http://jsfiddle.net/aKR2u/上的狡猾示例，因为javascript被称为onLoad，事件似乎不起作用。

问题是您在创建画布之前尝试获取画布，因此画布设置为null。所以你应该移动

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");

到您的drawBoard()函数或在加载画布后调用的其他函数。如果你想保持画布和上下文全局，你可以这样做：

...

var canvas;
var context;

function drawBoard() {

    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");

    ...
}

JavaScript没有从Html调用

2 个答案: