Question

这是我的HTML：

<canvas id="test" width="400" height="200"></canvas>

这是我的javascript：

var canvas_one = document.getElementById("test");
var canvas_context = canvas_one.getContext("2d");
canvas_context.fillRect(50, 25, 150, 100);

我只是在尝试这个，并没有任何教程似乎工作。我使用chrome作为我的浏览器fyi。

原来的错字只在这里;不在我的编辑器中。对不起。

我收到错误：Uncaught TypeError：即使使用jsfiddle示例，也无法调用null的方法'getContext'。

好的，我弄清楚出了什么问题。因为我的javascript位于html文件的头部，所以它是在DOM完全加载之前加载的，所以当它尝试var canvas_one = document.getElementById("test");时，它将canvas_one设置为null。所以我所做的只是将它包装在jquery中：

$(document).ready(function(){
var canvas_one = document.getElementById("test");
var canvas_context = canvas_one.getContext("2d");

canvas_context.fillStyle = "rgb(255,0,0)";
canvas_context.fillRect(10, 25, 150, 100);

});

现在它在读取javascript之前等待DOM加载，一切正常。

Answer 1

我认为mozilla tutorial是最好的，试试吧。

更正以下内容： document.getElementById ，您输错了。

Answer 2

确保在DOM准备好之后，任何引用DOM的代码都会执行。这可以通过将所有内容包装在使用window.onload调用的函数中，或者使用jQuery或类似的库来为您执行此操作来实现。

Answer 3

您有getElementById的拼写错误，我也建议您设置fillStyle。

<强> Live Demo

var canvas_one = document.getElementById("test");
var canvas_context = canvas_one.getContext("2d");

canvas_context.fillStyle = "rgb(255,0,0)";
canvas_context.fillRect(10, 25, 150, 100);

我正在玩帆布。我如何让它工作？

3 个答案: