javascript canvas检查点击形状

我有一个问题，在javascript中的点击功能。这是我的代码：javascript canvas检查点击形状

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(); 
});

但单击事件不工作！有人知道为什么吗？提前感谢你！

来源

2012-09-27 user1590534

您需要发布你的HTML - 我看不到有什么“帆布“或”大绿色“是，并且这可能是问题出在何处，与H不匹配TML和JavaScript名称。 –

对不起，这里是HTML： http://jsfiddle.net/Babsi/eadBu/1/ – user1590534

本文可能有助于：https：// medium。com/devtravel/hit-region-detection-for-html5-canvas-and-how-to-listen-to-click-events-on-canvas-shapes-815034d7e9f8＃.wgzhx52ns – lavrton

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

你可以使用jquery在画布上获取点击事件，并从光标位置计算用户是否点击了圆圈，但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/

来源

2012-09-27 16:35:07 supernova

也谢谢你！这真的帮助我！ – user1590534

ui感谢您的代码！现在我明白了更好！ – user1590534

好，但如果'Math.pow（x-50,2）+ Math.pow（y-50,2） Ken

bigGreen不在HTML，所以$（ “＃bigGreen”）选择什么。你不能在JavaScript函数之类的东西上放置点击功能;因为它们不存在于DOM中，你怎么能点击它？您应该用#canvas替换#bigGreen，因为“canvas”是您的HTML元素。

我分出你的小提琴来显示这here。

编辑：如果你想看到用户点击一个特定的圈子，你用画布点击事件，然后，你确定单击了哪个圈子由传递到点击事件的坐标。

来源

2012-09-27 16:40:24

所以我需要添加更多的画布？但我需要大约40个圈子，所以我必须添加40个画布？有更好的解决方案吗？ – user1590534

不，一个画布。我编辑了我的答案。你需要检查点击鼠标的坐标。 –

好吧，我明白，非常感谢你，我会尽我所能！ – user1590534

现在可以使用严重的地区在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); 
    } 
}

或者只是使用众多画布API之一：

http://www.fabricjs.com/

http://www.createjs.com/easeljs

http://www.paperjs.org

等等

来源

2016-01-14 14:39:55 RobotEyes

但它现在还是一个实验性功能:( – sarkiroka

您可以尝试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' 
    }); 
    } 
});

来源

2016-06-29 23:22:31 Kld

javascript canvas检查点击形状

回答

相关问题