Question

我正在尝试用html5的画布创建一个简单的绘图应用程序，我使用this教程作为我的基础。我正在尝试创建一个删除当前所选项目的按钮。但我确定如何使用html创建一个按钮，然后让按钮访问CanvasState函数。在本教程中，所有画布的功能（mousedown，鼠标，选择等）都添加了类似CanvasState.prototype.getMouse = function(e)的内容。那么如何在HTML <button onClick="delete()">Delete</button>中添加一个按钮并使delete（）成为一个CanvasState的函数，或者至少可以访问其实例变量？

Answer 1

canvas就像一个位图图像，你不能在其中添加一个元素在你的教程中，每当点击鼠标并且其坐标为时，就会制作一个正方形位于方坐标下，方坐标改变等于鼠标坐标
它看起来像是在拖延。

Answer 2

这就是我解决它的方式。创建按钮

<button id="delete">Delete</button>

访问Javascript中的按钮

this.delete_button = document.getElementById('delete');

因此，当我们在函数中有函数时，我们不会混淆上下文：

myState = this;

肮脏的工作

myState.delete_button.onclick = function() {
      if(myState.selected_index != -1){        
        myState.shapes.splice(myState.selected_index, 1);
        myState.selected_index = -1;
        myState.selection = null;
        myState.valid = false;
      }
  }

影响画布的按钮

2 个答案: