HTML5 Canvas - マウスクリックでマウスの座標に画像を追加

Question

まあまあ、私は何時間もこれを取得しようとしていますが、何も見つかりません。

ユーザーがキャンバス上でクリックしたときに、私はイメージ（imgObj）を持つようにしたい誰か迅速なスクリプトを入力するか、このためのチュートリアルの方向に私を指す。..

は、キャンバスの上に出てくることができます。私は、ユーザーがクリックしたときのマウスの座標に画像を表示したい。

アイデア？

ありがとうございます！

Answer 1

あなたはここに始めることができ：http://www.html5canvastutorials.com/

これはHTML5のキャンバス上のチュートリアルです。

KineticJSこれは本当に簡単になりますライブラリです：後半の応答のための

container.on("mousedown", function(){ 
     image.show(); 
}); 

container.on("dragmove", function(){ 
    var mousePos = container.getMousePosition(); 
    var x = mousePos.x; 
    var y = mousePos.y; 
    image.move(x, y) 
}); 

container.on("dragend"), function(){ 
    image.hide(); 
}); 

Answer 2

本当に申し訳ありません：あなたは、あなたの目標を達成するために、次の方法を使用することができますKineticJSと本質的にhttp://www.kineticjs.com/

。私はこの質問が神よりも古いと知っていますが、まだ答えは受け入れられていないので、私は外部の図書館を使いたくない人のために2セントを入れたいと思っていました。

あなたが望むことができる最小限のスクリプトを書きました。それに応じてfillRect()をdrawImage()に変更してください。ここで

var cn = document.getElementById("main"); 
var c = cn.getContext("2d"); 
var mouse = {x:0, y:0}; 

window.addEventListener('mousedown', mHandler); 

function mHandler(event) { 
    mouse.x = event.clientX; 
    mouse.y = event.clientY; 
}; 

function main() { 
    c.clearRect(0, 0, cn.width, cn.height); 
    c.fillStyle = "red"; 
    c.fillRect(mouse.x, mouse.y, 50, 50); 
} 

setInterval(main, 1000/60); 

は、実施例のJSFiddleです：http://jsfiddle.net/96s20d7m/

私はあなたがキャンバス上でクリックした場所にxとy値を設定し、その後fillRect()とそこに何かを描いています。

pageXとpageYは境界、パディング、余白などに基づいて変更されるため、これは期待どおりに機能しないことに注意してください。これはフィドルで確認できます。この作業を行うには、pageX/YをoffsetX/Yに変更するか、ポリフィルを使用します。

mHandler機能でこのような何かが少し良く動作します：

if(event.offsetX && event.offsetY) { 
    mouse.x = event.offsetX; 
    mouse.y = event.offsetY; 
} 
else { 
    mouse.x = event.layerX; 
    mouse.y = event.layerY; 
} 

それともあなたはそれを短縮したい場合：

mouse.x = event.offsetX ? event.offsetX : event.layerX; 
mouse.y = event.offsetY ? event.offsetY : event.layerY; 

そして、あなただけの

を呼び出すことができますcontext.drawImage(imgObj, mouse.x, mouse.y, imgObj.width, imgObj.height);

マウスクリックの中心は、ちょうどこのよう

context.drawImage(
    imgObj, 
    mouse.x - imgObj.width/2, 
    mouse.y - imgObj.height/2, 
    imgObj.width, imgObj.height 
); 

を呼び出す：http://jsfiddle.net/96s20d7m/4/

ここでも、あなたのイメージのための四角形を置き換えてください。

私はこれがこの年後に読んだ人に役立つことを願っています！