文字“破坏”画布？

Question

我可能有一个很简单的问题： 我在我的 HTML 页面上创建了一个画布，并在上面画了一些东西。 现在我想在这个画布上放置一个普通的 p-Text 对象。 但是，当我使用 x|y 鼠标坐标 canvas.onmousemove(e) 插入一个新的 p 元素和 position:absolute 设置时，我在画布上的绘画会“丢失”。画布元素变为白色。

此外，画布不再对点击做出反应，因此我无法继续绘画。 对我来说，javascript 似乎崩溃了，但 Firebug 和 firefox 错误控制台都没有显示任何错误。

Answer 1

我不确定我是否知道您需要做什么。 我有一个现场演示，画布上画着矩形，我绑定了一个监听器来点击事件。当您单击画布时，新的 HTMLParagraphElement 会在当前鼠标位置处创建。演示可用：http://jsfiddle.net/wDpFk/

假设，段落位置在 css 中定义为绝对，当然颜色属性应该不同于黑色或红色:)

好的。在画布上画一些东西

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" );

})