Question

我正在学习画布和HTML5

我想在点击画布时运行一个函数，但我的代码不起作用请求帮助。我的代码如下

 <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);

向画布添加事件侦听器时出错

2 个答案: