Question

我在javascript中遇到点击功能的问题。这是我的代码：

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext('2d');

BigCircle = function(x, y, color, circleSize) {
    ctx.shadowBlur = 10;
    ctx.shadowColor = color;
    ctx.beginPath();
    ctx.arc(x, y, circleSize, 0, Math.PI * 2, true);
    ctx.fill();
    ctx.closePath();
};

var bigGreen = new BigCircle(1580, 800, '#5eb62b', 180);

function init() {
    $("#bigGreen").click(function(e){
    alert("test");              
    });
}
$(document).ready(function() {
    init();
});

但点击事件无效！有人知道为什么吗？非常感谢你！

Answer 1

您现在可以在Chrome和Firefox中使用点击区域：

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility#Hit_regions

ctx.beginPath();
ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
ctx.fill();
ctx.addHitRegion({id: "bigGreen"});

并添加回调

canvas.onclick = function (event)
{
    if (event.region) {
        alert('You clicked ' + event.region);
    }
}

或者只使用众多canvas API中的一个：

http://www.fabricjs.com/

http://www.createjs.com/easeljs

http://www.paperjs.org

等...

Answer 2

没有看到你的HTML这个问题有点不清楚，似乎你想在画布上绘制一些内容并使用jquery为圆圈添加点击事件，这是不可能的。

你可以使用jquery在画布上获取click事件，并且从光标位置你可以计算出用户是否点击了这个圆圈，但jquery在这里不会帮助你，你必须自己做数学。

jquery仅适用于dom元素。

BigCircle = function(ctx,x, y, color, circleSize) {
    ctx.beginPath();
    ctx.arc(x, y, circleSize, 0, Math.PI * 2, true);
    ctx.fillStyle=color
    ctx.fill();
    ctx.closePath();
    this.clicked=function(){
      ctx.fillStyle='#ff0000'
      ctx.fill();
    }
};

function init() {
  var canvas = document.getElementsByTagName("canvas")[0];
  var ctx = canvas.getContext('2d');
  var bigGreen = new BigCircle(ctx,50, 50, '#5eb62b', 50);
  $('#canvas').click(function(e){
    var x = e.clientX
      , y = e.clientY          
    if(Math.pow(x-50,2)+Math.pow(y-50,2) < Math.pow(50,2))   
      bigGreen.clicked()
  })    
}


$(document).ready(function() {
    init();   
});

jsfiddle在这里 http://jsfiddle.net/yXVrk/1/

Answer 3

bigGreen不在HTML中，因此$（“＃bigGreen”）不会选择任何内容。你不能在JavaScript函数之类的东西上放置一个click函数;因为它们不存在于DOM中，你怎么能点击一个呢？您应该将#bigGreen替换为#canvas，因为“canvas”是您的HTML元素。

我把你的小提琴分开来展示这个here。

修改：如果您想要查看用户点击特定圈子，您可以使用画布点击事件，然后确定通过点击事件传递的坐标点击了哪个圈子

Answer 4

您可以尝试jcanvas

http://projects.calebevans.me/jcanvas/docs/mouseEvents/

// Click the star to make it spin
$('canvas').drawPolygon({
  layer: true,
  fillStyle: '#c33',
  x: 100, y: 100,
  radius: 50,
  sides: 5,
  concavity: 0.5,
  click: function(layer) {
    // Spin star
    $(this).animateLayer(layer, {
      rotate: '+=144'
    });
  }
});

Answer 5

Canvas API函数 isPointInPath （）可用于辅助命中检测。该功能至少可以告诉您鼠标坐标是否在复杂的形状内，而无需您自己进行复杂的数学运算。可能也适用于简单形状，但我的用例适用于贝塞尔曲线路径。但是，您需要将此功能结合到绘图逻辑中以在打开路径时进行测试，或者保留要测试的Path2d对象数组。我重绘了onClick处理程序，并从事件args中传递了鼠标坐标，但我想我可以保留一个Path2d对象数组。

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath

javascript canvas检测点击形状

5 个答案: