文字“破坏”画布？

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

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

来源

2011-12-29 ltsstar

后您的代码，请。 – abuduba 2011-12-29 10:26:48

小心分享代码？最好是一个实时的HTML页面。 – 2011-12-29 10:26:48

[http://jsfiddle.net]（http://jsfiddle.net） – abuduba 2011-12-29 10:28:45

我不知道我知道你需要做什么。我有一个现场演示，其中是绘制矩形的画布，我绑定了一个监听器来点击事件。当您单击画布时，将在当前鼠标位置上创建新的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"); 

})

来源

2011-12-29 11:27:25 abuduba

好的，那有效！但我不得不添加p.style.position ='绝对'。 – ltsstar 2011-12-29 11:52:13

好的。不管你如何分配位置属性:) – abuduba 2011-12-29 12:02:52

文字“破坏”画布？

回答

相关问题