向 canvas 添加事件侦听器时出错

Question

我正在学习canvas和HTML5

我想运行单击 canvas 时的功能，但我的代码无法正常工作，请帮忙。我的代码如下

 <center><canvas id="mycanvas"></canvas></center>
 <script type="text/javascript">
    Canvas = function(canvasel,width,height)
              {
                   this.el = canvasel;
                    this.el.width = width;
                    this.el.height = height;
                    this.ctx = canvasel.getContext("2d");

              }    


  var canvas = new Canvas(document.querySelector("#mycanvas"),300,300);      


     canvas.addEventListener('click', function() { alert('gg') }, false);
     canvas.ctx.moveTo(50,50);
     canvas.ctx.lineTo(250,250);            
     canvas.ctx.stroke();
     canvas.ctx.closePath();
     canvas.ctx.fillRect(0,0,100,100);


</script>

谁能告诉我哪里错了？

Answer 1

您必须将事件侦听器添加到要传递给 Canvas 构造函数的 DOM 元素。

所以与其这样做：

canvas.addEventListener('click', function() { alert('gg') }, false);

你应该这样做：

canvas.el.addEventListener('click', function() { alert('gg') }, false);

Answer 2

首先你应该做这样的事情，

canvas.el.addEventListener('click', function() { alert('gg') }, false);

既然你问了，这就是你想要的

http://jsfiddle.net/oz94z8jn/

function somefunc(){
alert("try me");
}
canvas.el.addEventListener('click', somefunc, false);

向 canvas 添加事件侦听器时出错

Error while adding event listners to canvas

html

javascript

canvas