Javascript 类型错误：无法调用 null 的方法“getContext”（匿名函数）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10660150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError: Cannot call method 'getContext' of null (anonymous function)
提问by Fieldflower
I'm a beginner at this and haven't really done any JavaScript before so I hope you can help me. I've made a canvas that lets the user choose a shape and a colour with radio buttons which is then drawn on to the canvas. I've also added a checkbox with an option of adding a gradient to the chosen colour. Here's the program: http://people.dsv.su.se/~caak1743/Canvas/canvas.html
我是这方面的初学者，之前没有真正做过任何 JavaScript，所以我希望你能帮助我。我制作了一个画布，让用户可以使用单选按钮选择形状和颜色，然后将其绘制到画布上。我还添加了一个复选框，其中包含为所选颜色添加渐变的选项。这是程序：http: //people.dsv.su.se/~caak1743/Canvas/canvas.html
Now I wan't to make it so that the shapes can be dragged and dropped around the canvas area. And I've found a code that I think can be altered to work on my program but I keep getting: TypeError: Cannot call method 'getContext' of null init (anonymous function) for the line:
现在我不想让形状可以在画布区域周围拖放。而且我发现了一个我认为可以更改为在我的程序上工作的代码，但我不断收到：TypeError:Cannot call method 'getContext' of null init (anonymous function) for the line：
var ctx = canvas.getContext("2d");
and I have no idea what is wrong or how I can solve it. I've tried looking for similar programs with similar problems but haven't found anything that I can apply here. Here's the code that I'm trying to incorporate with mine:
我不知道出了什么问题，也不知道如何解决。我试过寻找有类似问题的类似程序，但没有找到我可以在这里应用的任何东西。这是我试图与我的合并的代码：
function init() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
return setInterval(draw, 10);
}
function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rectangle(0,0,WIDTH,HEIGHT);
ctx.fillStyle = "#444444";
rectangle();
}
function myMove(e){
if (dragok){
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
}
}
function myDown(e){
if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
e.pageY > y -15 + canvas.offsetTop){
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
dragok = true;
canvas.onmousemove = myMove;
}
}
function myUp(){
dragok = false;
canvas.onmousemove = null;
}
init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
回答by Avinash
Just correct it to the following:
只需将其更正为以下内容：
<script type="text/javascript">
window.onLoad=function(){ init();};
function init() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
return setInterval(draw, 10);
}
function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rectangle(0,0,WIDTH,HEIGHT);
ctx.fillStyle = "#444444";
rectangle();
}
function myMove(e) {
if (dragok) {
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
}
}
function myDown(e) {
if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
e.pageY > y -15 + canvas.offsetTop) {
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
dragok = true;
canvas.onmousemove = myMove;
}
}
function myUp() {
dragok = false;
canvas.onmousemove = null;
}
init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
</script>
This should work. The problem is canvas element need to be ready to run the script. Since the <script>in <head>section runs before loading the <canvas>it gives the error.
这应该有效。问题是画布元素需要准备好运行脚本。由于<script>in<head>部分在加载之前运行，<canvas>它给出了错误。
回答by blesius
I found two solutions. The first is to add jquery to you page and then there is no need for using in-html js by wrapping the whole js code into
我找到了两个解决方案。首先是将jquery添加到您的页面中，然后不需要通过将整个js代码包装成使用in-html js
$(document).ready(function() { Your code here});
$(document).ready(function() { Your code here});
回答by rohit
You just need to do to that to get rid of the error. Just add the canvas before the script and always place your script at the end.
您只需要这样做即可消除错误。只需在脚本之前添加画布，并始终将脚本放在最后。
<body>
<canvas id="ca"></canvas>
<script type="text/javascript">
var ca = document.getElementById("ca");
var co = ca.getContext("2d");
// whatever your code
</script>
</body>
回答by rohit
Ensure that your script is AFTERyour canvas element.
确保你的脚本后您的canvas元素。
