在頁面上直接'寫'

Question

有沒有人對我如何在頁面上進行字面書寫有什麼想法，就像用戶可以在PowerPoint上寫字一樣？ 我明白，放置一個div 1px的方塊可以完成這項工作，但認爲這可能會導致代碼混亂（以及很多它！）

在此先感謝您的任何想法。

編輯：我不能使用畫布，因爲項目的其餘部分將不支持它，除非某種方式畫布可以變得透明，並與比文檔的其餘部分更高的zIndex。

Answer 1

這是我會做：

http://jsfiddle.net/DerekL/DqZX8/

function drawingArea(ele) { 
    var width = ele.scrollWidth, 
     height = ele.scrollHeight, 
     area = $("<svg>").attr({ 
      width: width, 
      height: height, 
      class: "draw" 
     }).appendTo(ele), 
     tracking = false; 

    var mDown = false, 
     id, line; 

    $(window).mousedown(function (e) { 
     if (tracking) { 
      mDown = true; 
      id = Date.now(); 
      line = $("<path>").appendTo(area).attr({ 
       d: [ 
        "M", 
        e.clientX + ele.scrollLeft, 
        e.clientY + ele.scrollTop 
       ].join(" "), 
       id: id 
      }); 
     } 
    }).mousemove(function (e) { 
     if (mDown) { 
      line.attr({ 
       d: line.attr("d") + " " + [ 
        "L", 
        e.clientX + ele.scrollLeft, 
        e.clientY + ele.scrollTop 
       ].join(" ") 
      }); 
      area[0].outerHTML = area[0].outerHTML; 
      area = $("svg"); 
      line = area.find("#" + id); 
      e.preventDefault(); 
      return false; 
     } 
    }).mouseup(function() { 
     mDown = false; 
    }); 

    return { 
     area: area, 
     startTrack: function() { 
      tracking = true; 
     }, 
     stopTrack: function() { 
      tracking = false; 
     }, 
     get isTracking() { 
      return tracking; 
     } 
    }; 
} 

var pad = new drawingArea(document.body); 
pad.startTrack(); 

Answer 2

你可以看看畫布或svg。這將完成這項工作。

Answer 3

如果你想在網頁上寫的是可以使用屬性contenteditable="true"

對於文檔：W3Schools