如何在HTML 5 Canvas中添加可选文本？

Sachin Joseph 发表于 Dev

萨钦·约瑟夫（Sachin Joseph）

我需要在画布上放置一个文本标签。可能吗？我怎样才能做到这一点？我知道这里有fillText，但是fillText没有给我平滑的输出文本。我还希望标签上的文本可由用户复制，如果我使用fillText是不可能的。

loxxy

假设，您只想在html页面的画布顶部放置一些文本：

HTML：

<label>Yahoo, I'm on top of canvas??</label>
<canvas width="500" height="500" ></canvas>

CSS：

canvas {
    border:1px solid gray;
}

label {
    position:absolute;
    top:20px;
    left:20px;
}

Working demo

编辑：

根据编辑，如果您正在寻找在画布内选择文本的解决方案，那将更加痛苦。

我建议使用CreateJS。使用画布可以使您的生活更加轻松。

尽管该库没有为您提供可选择的文本，但是易于实现。

这是DEMO创建可选文本的方式。

// Text Selector Class
function Selector(stage, text) {
    var select = new createjs.Shape();

    function selector(x, y, width, height) {
        select.graphics.clear().beginFill("#ace")
            .drawRect(x || 0, y || 0, width || 0, height || 0);
    }
    var tuw = text.getMeasuredWidth();
    var tuh = text.getMeasuredHeight();
    text.addEventListener("mousedown", function (e) {
        var startX = e.rawX;
        var onMove = function (e) {
            if (e.rawX >= text.x && e.rawX <= text.x + tuw) selector(startX, text.y, e.rawX - startX, tuh);
        };
        var onUp = function () {
            stage.removeEventListener("stagemousemove", onMove);
            selector();
        };
        stage.addEventListener("stagemousemove", onMove);
        stage.addEventListener("stagemouseup", onUp);
    });
    return select;
}


var stage = new createjs.Stage("shape");

// Text Node
var text = new createjs.Text("Hello World");
text.x = 100;
text.font = "20px Arial";
text.color = "#ff7700";
text.cursor = "text";
stage.addChild(text);

// Attach Selector 
stage.addChildAt(new Selector(stage, text), 0);

// Important
stage.enableMouseOver();
setInterval(function () {
    stage.update();
}, 100);