onclickをキャンバス内の変数に割り当てる方法は？

-2

私はキャンバスで作ったサークルにonclickイベントがあるようにしようとしています。私は成功なしで次のことを試みた。誰かがいくつかの指針を提供できるなら、それは素晴らしいだろう。onclickをキャンバス内の変数に割り当てる方法は？

<!DOCTYPE html> 
<html> 
<head> 

</head> 
<body> 
<div id="type"></div> 
<canvas id="ctx2" width="500" height="500" style="border: solid 1px;"></canvas> 
<script> 
var ctx = document.getElementById("ctx2").getContext("2d"); 
//var message = 'Hello John, this is your canvas.'; 
//ctx.fillStyle = 'red'; 
//ctx.font = '30px Arial'; 
//ctx.opacity = 0; 
//ctx.fillText(message,50,50); 

ctx.beginPath(); 
ctx.arc(100,75,50,0,2*Math.PI); 
ctx.stroke(); 
ctx.onclick = displayDate(); // This is what I used (stack overflow) 

function displayDate() { 
    document.getElementById("type").innerHTML = Date(); 
} 

document.getElementById("type").innerHTML = typeof ctx 


</script> 
</body> 
</html>

出典

2016-04-09 JohnSeuss

のonclickイベントはelemeに取り付けることができますDOMに存在するnt。キャンバスに描画されたものはDOMには存在しません。それは単なるグラフィックスです。これを行う1つの方法は、onclickをキャンバス全体に貼り付け、クリックした場所がサークル内にあるかどうかを判断することです。 – Tibrogargan

キャンバスにイベントリスナーを追加し、作成した円形領域内に「クリック」イベント座標があるかどうかを確認する必要があります。 jsFiddle例：https://jsfiddle.net/aL2epngo/

var circle = {x:100,y:75, r:50}; 

function displayDate() { 
    document.getElementById("type").innerHTML = Date(); 
} 

function checkBoundaries(x,y){ 
    var clicked = false; 
    if(x >=circle.x - circle.r && x <= circle.x+circle.r){ 
     if(y >= circle.y- circle.r && y <= circle.y+circle.r){ 
     clicked = true; 
     } 
    } 
    return clicked; 
} 

function clickHandler(e){ 

    var canvas = document.getElementsByTagName("canvas")[0]; 
    var x = e.pageX ? e.pageX: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
     var y = e.pageY ? e.pageY: e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
     x -= canvas.offsetLeft; 
     y -= canvas.offsetTop; 

     if(checkBoundaries(x,y)){ 
     displayDate() 
     } 

}

出典

2016-04-09 07:14:35 nick

RaphaelJSの使用を考えたことがありますか？ – djsony90

RaphaelJSについて聞いたことがありません。 – nick

@ djsony90あなたはこの場合の使用方法を示す答えを自由に書くことができます –

-1

あなたは満足し、私はコールセンターでの位置のマップを作るためにこれを使用してクリック私のため

出典

2016-04-09 07:19:25 Rajiv

議決権を行使された場合、あなたが

ctx.addEventListener('click', function(event) { 
    displayDate(); 
},false); 

//or 
canvas.addEventListener("mousedown",function(){ 
     displayDate(); 
},false)

を使用することができます私は別の行動を取るポジション。

はここに例を示します

HTML：

JAVASCRIPT：

var canvas = Raphael('test', 500, 500); 
var rect = canvas.rect(50,50,50,50); 
rect.attr('fill', 'red'); 
rect.click(function(test){alert('test');});

https://jsfiddle.net/g5gL1j02/

出典

2016-04-09 07:38:54 djsony90

onclickをキャンバス内の変数に割り当てる方法は？

答えて

関連する問題