Javascript 未定义onclick事件的函数-HTML5画布

我刚刚开始使用HTML5画布，我想使用

onclick

在我的文档中调用as

js

函数

然而，尽管在我的JS中声明了函数，我仍然在单击时得到

[函数名]未定义

该功能的定义如下：

function draw_b() {
    var b_canvas = document.getElementById("b"); // finds the canvas in the DOM
    var b_context = b_canvas.getContext("2d"); // context for drawing. No 3D option yet
    b_context.fillRect(50, 25, 150, 100);
}

onclick="draw_b();return false"

单击事件包括如下内容：

function draw_b() {
    var b_canvas = document.getElementById("b"); // finds the canvas in the DOM
    var b_context = b_canvas.getContext("2d"); // context for drawing. No 3D option yet
    b_context.fillRect(50, 25, 150, 100);
}

onclick="draw_b();return false"

但是，当我单击该元素时，我得到：

draw_b is not defined

你用错了身份证

var b_canvas = document.getElementById("a");// Use `a` not `b`

在JSFIDLE中，您需要使用
No Wrap-In
选项，以便在对HTML元素内联使用时定义该函数。另外
var b_canvas=document.getElementById（“b”）应该是
var b_canvas=document.getElementById（“a”）

Jsfiddle不喜欢
onclick=“”
，因此您需要使用JavaScript中的
addEventListener


var a_canvas=document.getElementById（“a”）；
a_canvas.addEventListener（“单击”，绘制b）；
函数draw_b（）{
var b_canvas=document.getElementById（“b”）；//在DOM中查找画布
var b_context=b_canvas.getContext（“2d”）；//绘图的上下文。还没有3D选项
b_context.fillRect（50,25,150,100）；
}
画布{
边框：1个点；
}
您希望在JSFIDLE中使用
无换行头。还有什么是
document.getElementById（“b”）
，它是在哪里定义的？也许你的意思是
a
？