javascript - HTML5 Canvas 的 Javascript 代码不起作用

Question

我写了一个不起作用的代码。它之前有一个错误，已修复。但是现在还有另一个错误：它不会在画布上绘制一个矩形。控制台未检测到错误。这是代码：

13.      var canvas=document.getElementById("canvas")
14.      var ctx=canvas.getContext("2d")
15.      function getMousePos(canvas,evt){
16.          var rect=canvas.getBindingClientRect()
17.          return{
18.               x:evt.clientX-rect.left,
19.               y:evt.clientY-rect.top
20.          }
21.      }
22.      canvas.addEventListener("mouseclick",function(evt){
23.           var mousePos=getMousePos(canvas,evt)
24.           ctx.fillRect(mousePos.x-15,mousePos.y-15,10,10)
25.      },false)

Answer 1

事件click不是mouseclick。

Answer 2

更改此行：

var rect=canvas.getBindingClientRect()

至

var rect=canvas.getBoundingClientRect();

和

canvas.addEventListener("mouseclick",function(evt) { ... 

至

canvas.addEventListener("click",function(evt) { ...

它应该可以工作。

在此处查看在线演示