Javascript 字面上'；写作'；在一页上

有没有人对我如何在页面上进行文字书写有什么想法，比如在PowerPoint上，用户可以在演示文稿上进行书写？ 我知道放置一个div 1px正方形可以完成这项工作，但我认为这可能会导致混乱的代码（以及很多代码！）

提前谢谢你的建议

---

编辑：我不能使用canvas，因为项目的其余部分不支持它，除非canvas可以透明化，并使用比文档其余部分更高的zIndex放置。

您可以查看canvas或svg。这就可以了。

如果你想在网页上写东西，可以使用属性

contenteditable=“true”

---

这就是我要做的：

功能绘图区域（ele）{
变量宽度=元素滚动宽度，
高度=标高高度，
面积=$（“”）。属性({
宽度：宽度，
高度:高度,，
班级：“抽签”
}).附录（ele），
跟踪=假；
var mDown=false，
id，行；
$（窗口）.mousedown（函数（e）{
如果（跟踪）{
mDown=true；
id=Date.now（）；
行=$（“”）.附加到（区域）.attr({
d:[
“M”，
e、 clientX+ele.scrollLeft，
e、 clientY+ele.scrollTop
].加入（“”），
id:id
});
}
}).mousemove（函数（e）{
如果（mDown）{
line.attr({
d:line.attr（“d”）+“”+[
“L”，
e、 clientX+ele.scrollLeft，
e、 clientY+ele.scrollTop
].join（“”）
});
区域[0]。outerHTML=区域[0]。outerHTML；
面积=$（“svg”）；
行=区域。查找（“#”+id）；
e、 预防默认值（）；
返回false；
}
}).mouseup（函数（）{
mDown=false；
});
返回{
面积:面积,，
startTrack:函数（）{
跟踪=真；
},
stopTrack:函数（）{
跟踪=假；
},
获取isTracking（）{
返回跟踪；
}
};
}
var pad=新绘图区域（文件正文）；
pad.startTrack（）；

你所说的“文字书写”是什么意思？我相信文字书写会涉及到一个sharpie和一个监视器。另一方面，如果你问如何在网页上进行虚拟书写，那么看看Canvas.SVG是一个更好的解决方案，如果你想让它后面的HTML也可以交互。re：编辑，画布背景，AFAIK，默认情况下是透明的。

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