无法从HTML调用JavaScript

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，事件似乎无法正常运行。

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

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

到drawBoard()函数或在画布加载后调用的其他东西。 如果要使画布和上下文保持全局，可以执行以下操作：

...

var canvas;
var context;

function drawBoard() {

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

    ...
}

无法从HTML调用JavaScript

问题描述

2 个解决方案

解决方案1
1 2014-05-25 05:36:26

解决方案2
1 已采纳 2014-05-25 05:43:10

无法从HTML调用JavaScript

问题描述

2 个解决方案

解决方案1 1 2014-05-25 05:36:26

解决方案2 1 已采纳 2014-05-25 05:43:10

解决方案1
1 2014-05-25 05:36:26

解决方案2
1 已采纳 2014-05-25 05:43:10