Javascript HTML5绘制画布-计算点击次数

我在图像上有一个HTML5绘制画布，允许用户在图像顶部绘制点：

JAVASCRIPT

var sketcher = null;
var brush = null;

$(document).ready(function(e) {

  brush = new Image();
  brush.src = 'assets/brush2.png';
  brush.onload = function(){
    sketcher = new Sketcher( "sketch", brush );
  }

 });

HTML

我试图添加一个函数，当用户在画布区域中单击/绘制一个点时，一个计数器步进+1

<p id="counter_text"><span>0</span></p>

0

增加onClick事件的计数器我忍不住要问：你的游戏区高度不是应该是

768

吗？必须是687，因为底部的横幅占据了剩余的空间。你有JSFIDLE吗？这样我就可以看到代码并了解它是如何工作的？我在代码的javascript部分添加了这个，但是计数器是仍然没有输出增量。我在html中还有一些css代码：#counter_text{z-index:10；position:absolute；color:white；font size:20px；font-family:Arial；font-weight:bold；left:385px；top:-25px；}这可能与您给出的示例相冲突。您是否将其置于onload事件中$（function（）{canvas.addEventListener（'click'，function（）{$（“#counter_text”）.val（$（“#counter_text”）.val（）+=1）；}，false）；}）；

<p id="counter_text"><span>0</span></p>

$(function(){
      canvas.addEventListener('click', function() { 
          $("#counter_text").val($("#counter_text").val() += 1);
      }, false);
});