如何添加文本到画布 [英] How to add text into canvas

问题描述

我有画布fillText函数的问题。我有这个代码：

I have problem with canvas fillText function. I have this code :

        scene.shapes['shop1'] = new Shape();
        var ps1 = scene.shapes['shop1'].points; // for convenience

        ps1[0] = new Point(1024, 66, 10);  // left  bottom
        ps1[1] = new Point(694, 66, 10);   // right bottom
        ps1[2] = new Point(694, 466, 10);    // right top   
        ps1[3] = new Point(1024, 466, 10);   // left  top    


        // Background
        scene.shapes['shop1'].polygons.push(new Polygon(
            [ps1[0], ps1[1], ps1[2], ps1[3] ],
            new Point(0, 0, 1),
            true /* double-sided */,
            Polygon.SOLID,
            [177, 216, 249]
        ));

                    scene.shapes['shop1Header'] = new Shape();
        var ps1h = scene.shapes['shop1Header'].points; // for convenience

        ps1h[0] = new Point(1024, 400, 11);  // left  bottom
        ps1h[1] = new Point(694, 400, 11);   // right bottom
        ps1h[2] = new Point(694, 466, 11);    // right top   
        ps1h[3] = new Point(1024, 466, 11);   // left  top    


        // Background
        scene.shapes['shop1Header'].polygons.push(new Polygon(
            [ps1h[0], ps1h[1], ps1h[2], ps1h[3] ],
            new Point(0, 0, 1),
            true /* double-sided */,
            Polygon.SOLID,
            [175, 175, 175]
        ));       

                          var x = -1024;
                          var y = -500;

                          ctx.font = '60pt Calibri';
                          ctx.lineWidth = 3;
                          // fill color
                          ctx.fillStyle = 'blue';
                          ctx.fillText('Hello World!', x, y);

但它不会创建文本，只显示商店。你知道吗，如何解决这个问题？非常感谢。

But it don´t create the text and only display the shop. Do you know, how to solve this problem? Thank you very much.

推荐答案

x和y的值为负，因此您在画布外绘制。如果将x设置为0，y设置为0 + font-size，它将绘制左上角的文本。

The value of x and y is negative so you are drawing outside of the canvas. If you set x to 0 and y to 0 + font-size it will draw the text in the top left corner.

编辑：您需要添加字体大小y。

you need to add the font size to y.

ctx.font = "60px Calibri"; // Use pixels instead of points
ctx.fillText("Hello World", 0, 60);

这篇关于如何添加文本到画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！