Question

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

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) { ...

它应该有用。

参见 ONLINE DEMO HERE

HTML5 Canvas的Javascript代码不起作用

2 个答案: