Question

我可以将div中的文本与几何形状对齐，就像这样 https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ5z8OYxnypDr09mmfFMunJj31x_XtfG3MFj0vlAa_ceoCnts0OfQ

没有隐藏一些文字？

更新

我需要这样的东西，上面是一个圆圈，但我也需要这样的平行四边形：

http://i39.tinypic.com/4r2ikm.jpg

Answer 1

这是一个js小提琴代码

fiddle

在某处找到它。

这是脚本

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var text = "'Twas the night before Christmas, when all through the house,  Not a creature was stirring, not even a mouse.  And so begins the story of the day of Christmas";
var font = "12pt verdana";
var textHeight = 15;
var lineHeight = textHeight + 5;
var lines = [];

var cx = 150;
var cy = 150;
var r = 100;

initLines();

wrapText();

ctx.beginPath();
ctx.arc(cx, cy, r, 0, Math.PI * 2, false);
ctx.closePath();
ctx.strokeStyle = "skyblue";
ctx.lineWidth = 2;
ctx.stroke();


// pre-calculate width of each horizontal chord of the circle
// This is the max width allowed for text

function initLines() {

    for (var y = r * .90; y > -r; y -= lineHeight) {

        var h = Math.abs(r - y);

        if (y - lineHeight < 0) {
            h += 20;
        }

        var length = 2 * Math.sqrt(h * (2 * r - h));

        if (length && length > 10) {
            lines.push({
                y: y,
                maxLength: length
            });
        }

    }
}


// draw text on each line of the circle

function wrapText() {

    var i = 0;
    var words = text.split(" ");

    while (i < lines.length && words.length > 0) {

        line = lines[i++];

        var lineData = calcAllowableWords(line.maxLength, words);

        ctx.fillText(lineData.text, cx - lineData.width / 2, cy - line.y + textHeight);

        words.splice(0, lineData.count);
    };

}


// calculate how many words will fit on a line

function calcAllowableWords(maxWidth, words) {

    var wordCount = 0;
    var testLine = "";
    var spacer = "";
    var fittedWidth = 0;
    var fittedText = "";

    ctx.font = font;

    for (var i = 0; i < words.length; i++) {

        testLine += spacer + words[i];
        spacer = " ";

        var width = ctx.measureText(testLine).width;

        if (width > maxWidth) {
            return ({
                count: i,
                width: fittedWidth,
                text: fittedText
            });
        }

        fittedWidth = width;
        fittedText = testLine;

    }

}

Answer 2

是的，这可以通过这些链接来实现

link1和link2。

然后通过postioning :)欢呼来设置div。

给出边框半径并获得你的形状。并使用一些边距来准确。我发布的链接可以帮到你。

在几何形状div中对齐文本

2 个答案: