繁体   English   中英

未定义onclick事件的函数-HTML5 canvas

[英]Function undefined for onclick event -HTML5 canvas

我刚开始使用HTML5画布,我想在文档中使用onclick作为js函数进行调用。

但是,尽管在我的JS中声明了该函数,但单击时[function name] is not defined

该函数的定义如下:

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

的jsfiddle

在JSfiddle中,您需要使用No Wrap - In <head>选项,以便在将内联用于HTML元素时定义该函数。 另外var b_canvas = document.getElementById("b"); 应该是var b_canvas = document.getElementById("a");

的jsfiddle

您使用了错误的ID

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

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

 var a_canvas = document.getElementById("a"); a_canvas.addEventListener("click",draw_b); 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); } 
 canvas { border: 1px dotted; } 
 <canvas id="a" width="300" height="225"></canvas> <canvas id="b" width="300" height="225"></canvas> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM