canvas - 在画布上禁止点击

Question

我需要防止在画布的某些地方单击。例如; 下面的画布。在 (0,250)-(0,300) 坐标为 (x,y) 之间，如果用户单击此区间内的任何位置，则什么都不会发生。

<script>

window.onload = function(){
    document.getElementById('lbltipAddedComment').innerHTML = '  ';
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
}
</script>

<div id="ccontainer">
<canvas id="myCanvas" width="800" height="500"></canvas>   
</div>

Answer 1

画布不会自行响应点击。它需要代码来做到这一点。就目前而言，默认情况下禁止在整个画布上单击。您的代码将使它能够对点击做出反应。因此，只需编写代码以按照您想要的方式对点击做出反应。

一个简单的方法是在画布上放置一个透明的 html 元素（使用 CSS 定位它）。设置一个单击处理程序，可能使用 JQuery，因此当单击该透明元素时，它会执行您想要的操作。