テキストが「破壊」するキャンバス？

Question

私はおそらくかなり簡単な質問があります： 私は自分のHTMLページにキャンバスを作成し、その上にいくつかのペイントをしました。 これで、通常のp-Textオブジェクトをこのキャンバスに配置したいと考えています。 しかし、x | yマウスの座標を使って新しいp要素を挿入すると、canvas.onmousemove（e）は私と位置を与えます：絶対的な設定、キャンバス上の私のペインティングは "失われます"。キャンバス要素は白になります。

また、キャンバスはクリックに反応しないため、ペイントを続行できません。 私にとってはjavascriptがクラッシュしたようですが、FirebugもFirefoxのエラーコンソールもエラーを表示しません。

Answer 1

私はあなたが何をする必要があるか分かっていません。 私はキャンバス上に描画された長方形のライブデモがあり、イベントをクリックするためにリスナーをバインドしました。キャンバスをクリックすると、現在のマウス位置に新しいHTMLParagraphElementが作成されます。デモは、上で利用可能である：http://jsfiddle.net/wDpFk/

段落位置を絶対としてのCSSで定義され、当然の色属性が異なる黒色または赤色よりもべき:)

[OK]を、仮定する。今キャンバス

var c = document.getElementById("c"), 
    ctx = c.getContext("2d"); 

ctx.fillRect(0, 0, 100, 100); 
ctx.fillStyle = "red"; 
ctx.fillRect(22, 25, 25, 25); 

そして、上に何かを描く：

//without jquery 
c.onclick = function(event) { 
    var e = window.event || event, 
     p =document.createElement("p"); 

    p.innerHTML = "text"; 
    p.style.left = e.clientX + "px"; 
    p.style.top = e.clientY + "px"; 
    document.body.appendChild(p); 
}; 

またはjQueryを使って：

$(c).click(function(e) { 

    $("<p>text</p>").css({ 
     left: e.pageX, 
     top: e.pageY 
    }).appendTo("body"); 

})