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檢查點擊形狀

回答

相關問題