Question

我可能有一个非常简单的问题：我在HTML页面上创建了一个画布并在其上做了一些绘画。现在我想在这个画布上放一个普通的p-Text对象。但是，当我使用x | y鼠标坐标canvas.onmousemove（e）给我和位置：绝对设置插入一个新的p元素时，我在画布上的绘画变得“丢失”。画布元素变为白色。

此外，画布不再对点击作出反应，因此我无法继续绘画。对我来说似乎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" );

})

文字“摧毁”画布？

1 个答案: