文字「破壞」畫布？

我可能有一個很容易的問題：我在我的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

文字「破壞」畫布？

回答

相關問題